ng-repeat:按单个字段过滤


484

我有一系列要重复使用ng-repeat的产品,并且正在使用

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

按颜色过滤这些产品。过滤器正在运行,但是如果产品名称/说明等包含颜色,则在应用过滤器后产品仍保留。

如何将滤镜设置为仅应用于数组的颜色字段而不是每个字段?


自定义过滤器也很强大=),您可能会喜欢,例如:noypi-linux.blogspot.com/2014/07/…–
Noypi Gilas


Answers:


475

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

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

谢谢马克,用这种方法比下面建议的方法有什么好处吗?
蒂姆·韦伯斯特2013年

7
@Seglespaan,不是。您可能会发现bmleite和blesh提出的方法读起来更好,因为您可以看到您正在按颜色进行过滤。此方法更紧凑,如果您想通过多个属性进行搜索,并且不想在HTML中包含长对象,则可能会很有用: filter:{ color: '...', size: '...', ...}
Mark Rajcok 2013年

2
@MarkRajcok,我如何能够通过多个属性进行搜索,查看并集而不是交集?
jetcom 2013年

2
@jetcom,您需要自定义过滤器,请参见stackoverflow.com/a/13845135/215945
Mark Rajcok 2013年

1
我不知道OP是否在重复页面时询问如何制作搜索框以及如何过滤掉ng-repeat中的值。这个答案下面的答案似乎与所提问题最相关。
twknab

573

指定colour要在其中应用过滤器的属性(即):

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

5
如果我要怎么办!by_colour作为过滤器:{colour:!by_colour}“
rjdmello 2014年

27
@rjdmello '!'+像这样就放在前面<div ng-repeat="product in products | filter:{ colour: '!'+by_colour }">
bmleite 2014年

3
不知道我是否理解正确,但是我想到的第一件事是:<div ng-repeat="product in products | filter:{ resultsMap.annie: '!!' }"> (类似的东西):<div ng-repeat="product in products | filter:by">和在控制器上:$scope.by = { 'resultsMap.annie': '!!' };。第二种方法使您可以更好地控制要过滤的属性。注意:'!!'表示“不为空”。
bmleite 2014年

2
@Federico,customFilter可以是您上的简单对象scope,可以在需要时进行更新。检查这个矮子
bmleite 2014年

1
这应该是公认的答案。这是最简洁的。好吧,除了“颜色”有太多的元音。
说唱时间

176

您可以按对象进行过滤,该对象的属性与必须过滤的对象相匹配:

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


2
可以说我有这种scope.products:{id:1,名称:“ test”,颜色:“ lightblue”},{id:2,名称:“ bob”,颜色:[{前景:黑色,背景:white}]}。那我怎样才能基于颜色过滤产品:背景以获得白色值?
Gery 2014年

2
@杰瑞:老实说,我认为你不能。无论哪种方式,使用filter:IMO都是不好的做法。因为它在您的视图中放置了逻辑,该逻辑应该真正存在于您的控制器中,并且不是很容易测试。
Ben Lesh 2014年

这是将过滤移至控制器并扩展模型的一种方法。ozkary.com/2015/05/angularjs-value-mapping-with-dynamic.html
ozkary

106

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

2
是类似“或”类型还是“与”类型的过滤器。
短信

1
同样的问题是,在过滤多个属性时,“与”或“或”吗?
lostintranslation 2015年

1
对于OR过滤器,唯一的方法是自定义过滤器,我认为
Dmitri Algazin

99

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

html

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

javascript

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

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


64

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

例:

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


88
<div ng-repeat="product in products | filter: { color: 'blue' }:true">将仅在完全匹配时起作用(最后的“ true”是比较器参数:link
标记

21

按颜色搜索:

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

您也可以做一个内部嵌套。

filter:{prop1:{innerprop1:searchinput}}

10

如果要执行以下操作:

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

4

我的方式是这样

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>

通常,使用ng-if是一个干净的解决方案
Kilizo

4

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

filter:by_colour

如果要与对象的单个属性匹配,请编写该属性而不是对象,否则其他一些属性将匹配。


1

在过滤器中,指定要对其应用过滤器的对象的属性:

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

0

如果要过滤一个字段:

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对您有好处

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.