如何忽略角度过滤器中的属性
Posted
技术标签:
【中文标题】如何忽略角度过滤器中的属性【英文标题】：How to ignore property in angular filter 【发布时间】：2017-10-08 12:14:32 【问题描述】：我试图在我的角度过滤器中忽略一个名为 title 的属性。我有一个如下例所示的数据集：
const data = [
title: 'Title 1'
groups: [
...,
...,
...
]
,
title: 'Title 2'
groups: [
...,
...,
...
]
,
title: 'Title 3'
groups: [
...,
...,
...
]
];
我正在使用带有过滤器的 ng-repeat 来迭代对象，并使用其他循环来迭代组：
<input ng-model="search">
<div ng-repeat="item in data | filter:search">
<h1>item.title</h1>
<ul>
<li ng-repeat="group in item.group | filter:search">
<span>group.something</span>
</li>
</ul>
</div>
工作正常，但现在我想忽略搜索中的标题。我确实尝试了几件事，例如：filter:search:item.title（在第一个 ng-repeat 中），或删除第一个 filter:search，但所有尝试都失败了。我错过了什么？我需要自定义搜索或类似的东西吗？
谢谢。
【问题讨论】：
您必须编写自己的函数或自定义过滤器来实现这一点，这可能会有所帮助：***.com/questions/16563018/… 【参考方案1】：您应该创建自定义过滤器，您可以在其中指定应排除哪些属性（忽略参数）：
angular.module('app', []).controller('MyController', ['$scope', function($scope)
$scope.data = [
name:"Tom", title:'London',
name:"Max", title:'Moscow',
name:"Henry", title:'NY',
name:"Paul", title:'NY',
name:"Sam", title:'Paris'
];
]).filter('myfilter',function()
return function(input, search, ignore)
if(!search)
return input;
var result = [];
for(var item of input)
for(var prop in item)
if(prop != ignore && item[prop].indexOf(search) != -1)
result.push(item) ;
break;
return result;
);<script src="//code.angularjs.org/snapshot/angular.min.js"></script>
<body ng-app="app">
<div ng-controller="MyController">
search: <input type='text' ng-model='search' ng-init='search="a"'/>
ignore: <input type='text' ng-model='ignore' ng-init='ignore="title"'/>
<ul>
<li ng-repeat='item in data | myfilter: search: ignore'>
item.name item.title
</li>
</ul>
</div>
</body>【讨论】：
【参考方案2】：如果您键入并且没有过滤标题属性，只需删除第一个过滤器。这样，当您键入 li 的不匹配项时将隐藏，但它们的 h1 将保持在同一个位置。
【讨论】：
【参考方案3】：您可以专门输入要过滤的属性并省略标题：
<li ng-repeat="group in item.groups | filter: something: search ">
上面的代码只会根据 something 属性进行过滤。
更多答案和解释在这里：AngularJS filter only on certain objects
【讨论】：
如果我想搜索组中的所有内容，而不是 item.data 中的标题怎么办？以上是关于如何忽略角度过滤器中的属性的主要内容，如果未能解决你的问题，请参考以下文章
Internet Explorer CSS 属性“过滤器”忽略溢出：可见
如何在 Chrome DevTool 的网络面板中同时按文本和属性进行过滤？