ng-repeat:单个字段过滤

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

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

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

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

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

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

指定您想要应用过滤器的属性(即colour ):

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

您可以通过具有与您必须过滤的对象相匹配的属性的对象进行过滤:

 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所建议的那样,这当然可以通过变量传递。

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

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

HTML

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

JavaScript的

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

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

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

例:

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

如果你要做到以下几点:

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

按颜色搜索:

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

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

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

我的方式是这样的

 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> 

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

 filter:by_colour 

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