ng-repeat：单个字段过滤

我有一系列使用ng-repeat重复使用的产品

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

通过颜色过滤这些产品。 过滤器正在工作，但是如果产品名称/描述等包含颜色，则产品在应用过滤器后仍然保留。

如何设置过滤器只适用于我的数组的颜色领域，而不是每个领域？

Answer 1

请参阅过滤器页面上的示例。 使用一个对象，并在颜色属性中设置颜色：

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

Answer 2

指定您想要应用过滤器的属性（即colour ）：

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

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

如果要筛选给定对象的孙（或更深），则可以继续构建对象层次结构。 例如，如果要过滤“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 } }"> 

Answer 5

最好的方法是使用一个函数：

HTML

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

JavaScript的

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

或者，您可以使用ngHide或ngShow根据特定条件动态显示和隐藏元素。

Answer 6

小心角度过滤器。 如果要在字段中选择特定值，则不能使用过滤器。

例：

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
这意味着您要选择“颜色”包含字符串“蓝色”而不是“颜色”为“蓝色”的产品。

Answer 7

如果你要做到以下几点：

 <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> 

Answer 8

按颜色搜索：

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

你也可以做一个内在的巢穴。

滤波器：{PROP1：{innerprop1：searchinput}}

Answer 9

我的方式是这样的

 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"}] 

子是一个输入字段或任何你喜欢的

像这样显示

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

Answer 10

您必须使用filter:{color_name:by_colour}而不是

 filter:by_colour 

如果你想匹配一个对象的单个属性，那么编写该属性而不是对象，否则其他一些属性将得到匹配。