495

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

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

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

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

4

12 回答 12

584

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

<div ng-repeat="product in products | filter:{ colour: by_colour }">
于 2013-02-06T16:01:04.497 回答
485

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

Search by color: <input type="text" ng-model="search.color">
<div ng-repeat="product in products | filter:search">
于 2013-02-06T15:58:33.610 回答
177

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

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

于 2013-02-06T16:00:33.040 回答
108

如果您想过滤给定对象的孙子（或更深），您可以继续构建您的对象层次结构。例如，如果要过滤“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 } }">
于 2014-10-15T21:46:23.280 回答
104

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

html

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

javascript

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

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

于 2015-07-20T06:45:28.007 回答
65

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

例子：

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”的产品。

于 2013-05-02T07:22:40.440 回答
23

按颜色搜索：

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

你也可以做一个内巢。

filter:{prop1:{innerprop1:searchinput}}
于 2017-05-01T18:19:52.053 回答
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>
于 2016-09-29T09:03:01.687 回答
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>
于 2016-04-11T10:46:20.413 回答
4

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

filter:by_colour

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

于 2017-03-17T20:12:57.973 回答
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}">
于 2018-02-13T06:57:28.703 回答
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对你有好处

于 2018-07-20T11:08:18.597 回答