使用标签应用动态过滤器答案

【问题标题】：Apply dynamic filters using Tags使用标签应用动态过滤器
【发布时间】：2014-07-10 05:42:07
【问题描述】：

我有一个使用 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 数组应用过滤器。我该怎么做？

【问题讨论】：

举例说明可能的输入和期望的输出。
见plnkr.co/edit/MiMT4T1Fdkcx9xRhi1ub?p=preview。在这里，我想使用标签来获取过滤器数据，因为我想应用多个过滤器。然后我想将标签作为过滤器传递。可能的输入：data1、data3（作为标签）可能的输出：通过 data1 和 data3 过滤的表格数据
是的，但是 "filtered through data1 and data3" 是什么意思？应该退回什么？具有与 dat1 或 data3 匹配的键的项目？具有匹配 data1 和 data3 的键的项目？与值而不是键进行比较？在您的小提琴示例中应该返回什么？

标签： javascript angularjs filter tags angularjs-filter

【解决方案1】：

如果您想要包含属性值与至少一个标签匹配的项目，您可以像这样定义您的自定义过滤器：

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。

【讨论】：

这就是我要找的。我认为这可以通过内置过滤器来完成，而无需自己创建自定义过滤器。无论如何，非常感谢您的帮助。
如果我删除所有标签，表格根本不显示任何元素。应该进行哪些修改，以便在没有标签的情况下，表格将显示所有条目？我在plnkr.co/edit/3MLi92cuRkw96xz644Zg?p=preview 有这个 Plunker。你能验证这是否是正确的方法吗？另外，在您的代码(items || []).forEach(function (item) { // Check each item 中，我不明白您使用items || [] 的原因，这些项目无论如何都不是空数组。你能解释一下吗。提前致谢。
你的实现是正确的- 一句话：最好将检查放在函数的顶部（if (tags.length === 0) { return items; }），这样可以避免不必要的计算。
关于您的其他问题，(items || []) 是我们的过滤器通过undefined 参数（例如，如果数据是从后端获取而您忘记初始化@987654330 @ 到一个空数组（直到实际数据到达），我们的过滤器会尝试在undefined 上调用forEach，你会在控制台中得到一个错误。(items || []) 表示：“使用items，除非它是虚假的（例如undefined、null、false、''、0）；然后使用[]）。我希望它确实有意义。
感谢您的快速回复。是的，现在更有意义了。