AngularJS应用使用标签动态过滤器过滤器、标签、动态、AngularJS

2023-09-13 04:23:45 作者:做自己的国王

我有其使用纳克重复显示在表中的元素的列表。我想申请这所使用的标签添加动态过滤器( NG-标签输入)。这个标签输入产生,我想作为过滤器使用动态标签。

I have a list of elements which is displayed in a table using ng-repeat. I want to apply dynamic filters which are added using Tags(ng-tags-input). This tag input generates dynamic tags which I want to use as filters.

下面是普拉克我已经创建。如何使用的条目这些标记来创建过滤器。

Here is the plunk I have created. How can I use entries from these tags to create filters.

有关单个元素我试图

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

但是这将只需要一个单一的元素。我想申请的标记整个项目是一个过滤器。

but this will take only a single element. I want to apply entire entries of tags to be a filter.

我看到的SO其他问题,但他们已经申请为

I have seen other questions on SO, but they have filters applied as

&LT; TR NG重复=吨表资料|过滤器:{数据1:someFilteData}&GT;

下面是对小提琴之一。我无法从JSON阵列应用滤镜。我怎样才能做到这一点?

Here is one of the fiddle. I am not able to apply filter from JSON Array. How can I do this?

推荐答案

如果你想包括具有相匹配的标签的至少一个属性值项,可以定义自定义过滤器是这样的:

If you want to include items that have a property-value that matches at least one of the tags, you can define your custom filter like this:

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

又见这个 短演示 。

See, also, this short demo.