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

如果要对给定对象的孙(或更深)进行过滤,可以继续构建对象层次结构.例如,如果要对'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

按颜色搜索:

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

你也可以做内巢.

filter:{prop1:{innerprop1:searchinput}}

Answer 8

如果您要执行以下操作:

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

sub 是输入字段或您喜欢的任何内容

像这样显示

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