検索入力ボックス、一連のフィルター ドロップダウン、および結果が表示される UL で構成される ajax 検索ページを作成しています。
検索のフィルター部分はページの別の場所にあるため、検索サーバー側への入力と ajax 要求の調整を処理するサービスを作成することをお勧めします。これは、いくつかの別個のコントローラー (検索ボックスと結果用に 1 つ、フィルター用に 1 つ) によって呼び出すことができます。
私が苦労している主なことは、ajax が呼び出されたときに結果を更新することです。ajax を SearchCtrl コントローラーに直接配置すると正常に動作しますが、ajax をサービスに移動すると、サービスの find メソッドが呼び出されたときに結果の更新が停止します。
見逃した単純なものだと確信していますが、見えないようです。
マークアップ:
<div ng-app="jobs">
<div data-ng-controller="SearchCtrl">
<div class="search">
<h2>Search</h2>
<div class="box"><input type="text" id="search" maxlength="75" data-ng-model="search_term" data-ng-change="doSearch()" placeholder="Type to start your search..." /></div>
</div>
<div class="search-summary">
<p><span class="field">You searched for:</span> {{ search_term }}</p>
</div>
<div class="results">
<ul>
<li data-ng-repeat="item in searchService.results">
<h3>{{ item.title }}</h3>
</li>
</ul>
</div>
</div>
</div>
AngularJS:
var app = angular.module('jobs', []);
app.factory('searchService', function($http) {
var results = [];
function find(term) {
$http.get('/json/search').success(function(data) {
results = data.results;
});
}
//public API
return {
results: results,
find: find
};
});
app.controller("SearchCtrl", ['$scope', '$http', 'searchService', function($scope, $http, searchService) {
$scope.search_term = '';
$scope.searchService = searchService;
$scope.doSearch = function(){
$scope.searchService.find($scope.search_term);
};
$scope.searchService.find();
}]);
これが大まかなJSFiddleです。ajaxをコメントアウトし、例として結果変数を手動で更新しています。簡潔にするために、フィルタ ドロップダウンは含めていません。
私はAngularJSに非常に慣れていないので、まったく間違った方法で行っている場合は、そのことを教えてください:)