我有一个元素列表,使用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>
但这只需要一个元素。我想将tags
的整个条目应用为过滤器。
我在SO上看过其他问题,但是他们将过滤器应用为
<tr ng-repeat = "t in tableData | filter:{data1:someFilteData}">
这是fiddle之一。我无法从JSON数组应用过滤器。 我怎么能这样做?
答案 0 :(得分:3)
如果要包含属性值至少与其中一个标记匹配的项目,可以像这样定义自定义过滤器:
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 。