web-dev-qa-db-ja.com

ng-repeat：単一フィールドでフィルタリング

Ng-repeatを使って繰り返し使っている一連の製品があります。 

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

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

すべてのフィールドではなく、配列のカラーフィールドにのみ適用するようにフィルタを設定する方法を教えてください。

angularjsng-repeatangularjs-filter
463
Tim Webster

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

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

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

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

フィルタリングしなければならないオブジェクトと一致するプロパティを持つオブジェクトでフィルタリングできます。

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が示唆しているように、これはもちろん変数で渡すことができます。

170
Ben Lesh

与えられたオブジェクトの孫（またはより深い）をフィルタしたい場合は、引き続きオブジェクト階層を構築できます。たとえば、「thing.properties.title」でフィルタリングしたい場合は、次のようにします。

<div ng-repeat="thing in things | filter: { properties: { title: title_filter } }">

フィルタオブジェクトに追加するだけで、オブジェクトの複数のプロパティをフィルタすることもできます。

<div ng-repeat="thing in things | filter: { properties: { title: title_filter, id: id_filter } }">
103
David Hansen

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

html 

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

ジャバスクリプト 

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

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

93
Khader M A

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

例：

ジャバスクリプト 

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のようなものを使うのでこれは両方を選択します
つまり、 "color"に "blue"が含まれ、 "color"が "blue"ではない製品を選択します。

62
Petr B.

色で探す： 

<input type="text" ng-model="searchinput">
<div ng-repeat="product in products | filter:{color:searchinput}">

内側の巣もできます。

filter:{prop1:{innerprop1:searchinput}}
17
CyberNinja

次のようにしたとします。

<li class="active-item" ng-repeat="item in mc.pageData.items | filter: { itemTypeId: 2, itemStatus: 1 } | orderBy : 'listIndex'"
                id="{{item.id}}">
    <span class="item-title">{{preference.itemTitle}}</span>
</li>

... itemTypeId 2とitemStatus 1のアイテムを取得するだけでなく、itemType 20、22、202、123とitemStatus 10、11、101、123のアイテムも取得します。これはフィルタのためです：{..構文は文字列を含むクエリのように機能します。

ただし、 ：true 条件を追加すると、完全一致でフィルタリングされます。

<li class="active-item" ng-repeat="item in mc.pageData.items | filter: { itemTypeId: 2, itemStatus: 1 } : true | orderBy : 'listIndex'"
                id="{{item.id}}">
    <span class="item-title">{{preference.itemTitle}}</span>
</li>
9
Phil

代わりに filter:{color_name:by_colour}を使用する必要があります

filter:by_colour

オブジェクトの単一のプロパティと一致させたい場合は、objectではなくそのプロパティを書きます。そうでなければ、他のプロパティが一致します。

4
amit banerjee

私のやり方はこれです

subjcts is

[{"id":"1","title":"GFATM"},{"id":"2","title":"Court Case"},{"id":"3","title":"Renewal\/Validity"},{"id":"4","title":"Change of Details"},{"id":"5","title":"Student Query"},{"id":"6","title":"Complains"}]

subは入力フィールドかあなたが好きなものは何でも

こんな感じ

<div ng-if="x.id === sub" ng-repeat=" x in subjcts">{{x.title}}</div>
4
Asad Ali Khan

フィルタを適用したいオブジェクトのfilterプロパティを指定します。

//Suppose Object
var users = [{
  "firstname": "XYZ",
  "lastname": "ABC",
  "Address": "HOUSE NO-1, Example Street, Example Town"
},
{
  "firstname": "QWE",
  "lastname": "YUIKJH",
  "Address": "HOUSE NO-11, Example Street1, Example Town1"
}]

しかし、名字のみにフィルタを適用したい 

<input type = "text" ng-model = "first_name_model"/>
<div ng-repeat="user in users| filter:{ firstname: first_name_model}">
1
Neeraj Bansal

1つのフィールドにフィルタをかけたい場合は、

label>Any: <input ng-model="search.color"></label> <br>
<tr ng-repeat="friendObj in friends | filter:search:strict">

すべてのフィールドにフィルタをかけたい場合は、

 label>Any: <input ng-model="search.$"></label> <br>
 <tr ng-repeat="friendObj in friends | filter:search:strict">

そして https://docs.angularjs.org/api/ng/filter/filter あなたにぴったり

0
milad dn