angularjs - ng-repeat : 単一フィールドによるフィルタリング

Question

私は ng-repeat を使用して繰り返し使用している一連の製品を持っています

<div ng-repeat="product in products | filter:by_colour"> 

これらの製品を色でフィルタリングします。フィルターは機能していますが、製品名/説明などに色が含まれている場合、フィルターを適用した後も製品が残ります。

すべてのフィールドではなく、配列の色フィールドにのみ適用されるようにフィルターを設定するにはどうすればよいですか?

Answer 1

colourフィルタを適用するプロパティ（つまり）を指定します。

<div ng-repeat="product in products | filter:{ colour: by_colour }">

Answer 2

フィルタページの例を参照してください。オブジェクトを使用し、colorプロパティで色を設定します。

Search by color: <input type="text" ng-model="search.color">
<div ng-repeat="product in products | filter:search"> 

Answer 3

フィルタリングする必要のあるオブジェクトと一致するプロパティを持つオブジェクトでフィルタリングできます。

app.controller('FooCtrl', function($scope) {
   $scope.products = [
       { id: 1, name: 'test', color: 'red' },
       { id: 2, name: 'bob', color: 'blue' }
       /*... etc... */
   ];
});

<div ng-repeat="product in products | filter: { color: 'red' }"> 

もちろん、Mark Rajcokが示唆したように、これは変数で渡すことができます。

Answer 4

これを行う最善の方法は、関数を使用することです。

html

<div ng-repeat="product in products | filter: myFilter">

JavaScript

$scope.myFilter = function (item) { 
    return item === 'red' || item === 'blue'; 
};

または、ngHide または ngShow を使用して、特定の基準に基づいて要素を動的に表示および非表示にすることができます。

Answer 5

角度フィルターには注意してください。フィールドで特定の値を選択したい場合は、フィルターを使用できません。

例：

JavaScript

app.controller('FooCtrl', function($scope) {
   $scope.products = [
       { id: 1, name: 'test', color: 'lightblue' },
       { id: 2, name: 'bob', color: 'blue' }
       /*... etc... */
   ];
});

html

<div ng-repeat="product in products | filter: { color: 'blue' }"> 

substr
これは、「色」が「青」ではなく、「色」に文字列「青」が含まれる製品を選択することを意味するようなものを使用するため、両方を選択します。