Ng-repeat:单字段过滤

我有一个产品数组,我在使用ng-repeat和正在使用

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

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

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

855233 次浏览

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

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

你可以通过一个对象来过滤,它的属性与你要过滤的对象相匹配:

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

指定你想要应用过滤器的属性(例如colour):

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

小心使用角滤镜。如果你想在字段中选择特定的值,你不能使用过滤器。

例子:

javascript

app.controller('FooCtrl', function($scope) {
$scope.products = [
{ id: 1, name: 'test', color: 'lightblue' },
{ id: 2, name: 'bob', color: 'blue' }
/*... etc... */
];
});

超文本标记语言

<div ng-repeat="product in products | filter: { color: 'blue' }">

这将选择两者,因为使用substr
这意味着你想选择的产品,其中“color”包含字符串“blue”,而不是“color”是“blue”。

如果希望筛选给定对象的孙辈(或更深层),则可以继续构建对象层次结构。例如,如果你想过滤'thing.properties. 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 } }">

最好的方法是使用函数:

超文本标记语言

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

javascript

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

另外,你也可以使用ngHide或ngShow根据特定的条件动态地显示和隐藏元素。

我的方式是这样

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是Input字段或者其他你喜欢的

像这样显示

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

如果你要做以下事情:

<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的项。这是因为过滤器:{…}语法的工作原理类似于字符串包含查询。

然而,如果你要添加:真条件,它将通过精确匹配进行过滤:

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

你必须使用 filter:{color_name:by_colour}代替

filter:by_colour

如果你想匹配一个对象的单个属性,那么写这个属性而不是object,否则其他的属性会被匹配。

按颜色搜索:

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

你也可以做一个内巢。

filter:{prop1:{innerprop1:searchinput}}

在filter中指定要应用筛选器的对象的属性:

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

如果你想过滤一个字段:

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">
< p >和 https://docs.angularjs.org/api/ng/filter/filter good for you