HTMLページで検索ボックスと複数のカテゴリのリンクを利用できます。
ユーザーがsearchBoxに入力するとすぐに、次のように表示します。
p in Products | filter {serachedText}
ユーザーがカテゴリのハイパーリンクをクリックすると、表示したい
p in Products | filter {categoryID}
しかし、serachedTextはまだ利用可能であるため、結果は
p in Products | filter {categoryID} | filter {serachedText}
ユーザーが任意のリンクをクリックするとすぐにserachedTextをクリアできる方法はありますか？
フィルタ式が間違っています。
データが次のようなカテゴリと名前のプロパティを持つJSON配列の場合：
self.Products = [
{ category: 1, name: 'Pencil' },
{ category: 1, name: 'Notebook' },
{ category: 2, name: 'Kitten' }
];
そして、選択したカテゴリと検索テキストに対して次のものをバインドします。
self.category = 1;
self.searchText = 'pen';
次のような複雑なフィルター式を作成できます。
filter: { category: vm.category | name: vm.searchText }
これにより、categoryとsearchTextの両方、またはそれらの組み合わせでフィルタリングされます。
searchTextをクリアするには、$ scope。$ watchを使用してカテゴリが変更されたかどうかを確認し、変更された場合はsearchTextをクリアします。
以下の例またはhttp://plnkr.co/edit/OEDvOnをご覧ください。この例では、選択したカテゴリが実際には選択したカテゴリの値と名前のプロパティを含むオブジェクトであるため、フィルタ式は少し複雑です。したがって、フィルタに渡す正しいものを取得するには、.valueを追加する必要があります。
別のポイント：クライアント側のフィルタリングを行う場合、これは問題ありませんが、サーバー側でフィルタリングする場合は、サービスレイヤーでフィルタリングを実行し、すべての可能なデータではなく、フィルタリングされた結果を返すだけです...帯域幅を節約しますと転送時間。
(function(undefined) {
'use strict';
angular.module('myApp',[]);
angular.module('myApp')
.controller('searchCtrl', searchCtrl);
searchCtrl.$inject = ['$log', '$scope'];
function searchCtrl($log, $scope) {
/* jshint validthis: true */
var self = this;
self.searchText = undefined;
self.categories = [
{ value: undefined, name: 'All' },
{ value: 1, name: 'Fruit' },
{ value: 2, name: 'Snacks' },
{ value: 3, name: 'Flower' },
{ value: 4, name: 'Pet' },
{ value: 5, name: 'Stationary' }
];
self.category = self.categories[0];
self.data = [
{ category: 1, name: 'Apple' },
{ category: 1, name: 'Grapes' },
{ category: 2, name: 'Dorito' },
{ category: 2, name: 'KitKat' },
{ category: 3, name: 'Roses' },
{ category: 3, name: 'Orchid' },
{ category: 4, name: 'Hamster' },
{ category: 4, name: 'Kitten' },
{ category: 5, name: 'Pencil' },
{ category: 5, name: 'Notebook' }
];
$scope.$watch(function() { return self.category; }, function(val, old) {
self.searchText = undefined;
});
}
}());<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="container" ng-app="myApp" ng-controller="searchCtrl as vm">
<div class="form-group">
<label>Category</label>
<select class="form-control" ng-options="cat.name for cat in vm.categories" ng-model="vm.category">
</select>
</div>
<div class="input-group">
<input class="form-control" type="textbox" ng-model="vm.searchText" placeholder="Search text here..." />
<span class="input-group-btn">
<button type="button" class="btn btn-primary">
<i class="glyphicon glyphicon-search"></i> Search</button>
</span>
</div>
<div class="well well-sm" style="margin-top:20px">
<ul ng-repeat="item in vm.data | filter:{category:vm.category.value, name:vm.searchText}">
<li>{{item.name}}</li>
</ul>
</div>
</div>この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加