我有一个使用ng-repeat在表中显示的元素列表.我想应用使用标签(ng-tags-input)添加的动态过滤器.此标签输入生成我想用作过滤器的动态标签.
这是我创建的plunk.如何使用这些标记中的条目创建过滤器.
我尝试了一个元素
<body ng-controller="MainCtrl">
<tags-input ng-model="tags"></tags-input>
<p>Model: {{tags}}</p>
<table border=1 cellpadding=10px>
<tr ng-repeat = "t in tableData | filter:tags[0].text">
<td>{{t.data1}}</td>
<td>{{t.data2}}</td>
</tr>
</table>
</body>
但这只需要一个元素.我想将标签的整个条目应用为过滤器.
我在SO上看到了其他问题,但是他们将过滤器应用为
< tr ng-repeat =“ tableData中的t |过滤器:{data1:someFilteData}”>
这是fiddle之一.我无法应用JSON数组中的过滤器.
我怎样才能做到这一点?
解决方法:
如果要包括属性值至少与标签之一匹配的项目,则可以定义自定义过滤器,如下所示:
app.filter('filterByTags', function () {
return function (items, tags) {
var filtered = []; // Put here only items that match
(items || []).forEach(function (item) { // Check each item
var matches = tags.some(function (tag) { // If there is some tag
return (item.data1.indexOf(tag.text) > -1) || // that is a substring
(item.data2.indexOf(tag.text) > -1); // of any property's value
}); // we have a match
if (matches) { // If it matches
filtered.push(item); // put it into the `filtered` array
}
});
return filtered; // Return the array with items that match any tag
};
});
并使用它像这样:
<tr ng-repeat="t in tableData | filterByTags:tags">
另请参见此short demo.