ng-repeat ：按单个字段过滤

Posted 2023-02-19

【中文标题】ng-repeat ：按单个字段过滤

【英文标题】：ng-repeat :filter by single field

【发布时间】：2013-01-21 21:23:21

【问题描述】：

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

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

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

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

【问题讨论】：

自定义过滤器也很强大=)，你可能会喜欢，例如：noypi-linux.blogspot.com/2014/07/…

不同的解决方案：***.com/a/24992197/257470

以正确的方式拼写颜色的好作品

【参考方案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对你有好处

【参考方案2】：

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

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

【讨论】：

谢谢马克，这样做比下面建议的方法有什么好处吗？

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

@MarkRajcok，我如何能够通过多个属性进行搜索，查看并集而不是交集？

@jetcom，你需要一个自定义过滤器，见***.com/a/13845135/215945

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

【参考方案3】：

按颜色搜索：

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

你也可以做一个内巢。

filter:prop1:innerprop1:searchinput

【参考方案4】：

在过滤器中指定要应用过滤器的对象的属性：

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

【参考方案5】：

你必须使用 filter:color_name:by_colour 而不是

filter:by_colour

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

【参考方案6】：

如果您要执行以下操作：

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

【参考方案7】：

我的方法是这样的

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 是一个干净的解决方案

【参考方案8】：

最好的方法是使用函数：

html

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

javascript

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

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

【讨论】：

谢谢，这在您进行复杂比较时非常有用

【参考方案9】：

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

例子：

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

【讨论】：

<div ng-repeat="product in products | filter: color: 'blue' :true"> 仅适用于完全匹配（末尾的 'true' 是比较器参数：link

【参考方案10】：

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

【讨论】：

这是像 'or' 类型还是 'and' 类型的过滤器。

同样的问题是过滤多个属性时是 AND 还是 OR？

对于 OR 过滤器唯一的方法是自定义过滤器，我认为

【参考方案11】：

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

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 所建议的那样。

【讨论】：

可以说我有这种范围。产品： id: 1, name: 'test', color: 'lightblue' , id: 2, name: 'bob', color ：[前景：黑色，背景：白色]。那么如何根据颜色过滤产品：背景以获得白色值？

@Gery：老实说，我认为你做不到。无论哪种方式，使用 filter: 都是一种不好的做法，IMO。因为它将逻辑放在您的视图中，而这些逻辑实际上应该在您的控制器中，并且不是非常可测试的。

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

【参考方案12】：

指定要在其中应用过滤器的属性（即colour）：

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

【讨论】：

如果我想要怎么办！ by_colour 作为过滤器：颜色：！ by_color "

@rjdmello 只是在前面加上'!'+，就像这样<div ng-repeat="product in products | filter: colour: '!'+by_colour ">

不确定我是否理解正确，但我首先想到的是：<div ng-repeat="product in products | filter: resultsMap.annie: '!!' "> 或（类似的东西）像这样：<div ng-repeat="product in products | filter:by"> 等等控制器：$scope.by = 'resultsMap.annie': '!!' ;。第二种方法使您可以更好地控制被过滤的属性。注意：'!!' 表示“非空”。

@Federico，customFilter 可以是您的 scope 上的一个简单对象，您可以随时更新它。检查这个plunker。

这应该是公认的答案。这是最简洁的。好吧，除了“颜色”的元音太多。