在 AngularJS 中过滤 ngtagsinput答案

【问题标题】：Filter ngtagsinput in AngularJS在 AngularJS 中过滤 ngtagsinput
【发布时间】：2015-01-29 17:32:45
【问题描述】：

我在使用 AngularJS 的标签过滤 JSON 数据时遇到了一些麻烦。我在这里尝试了 ExpertSystem (Apply dynamic filters using Tags) 稍微修改过的过滤器：

groupifyApp.filter('filterByTags', function () {
    return function (items, tags) {
        var filtered = [];
        if (tags.length == 0) {
            filtered = items;
        }
        (items || []).forEach(function (item) {
            var matches = tags.some(function (tag) {
                return (item.data1.indexOf(tag.text) > -1) || (item.data2.indexOf(tag.text) > -1);
            });
            if (matches) {
                filtered.push(item);
            }
        });
        return filtered;
    };
});

在我的 HTML 中：

<tags-input ng-model="searchTags" type="text" placeholder="Search tags">
        <auto-complete source="allTags()"></auto-complete>
    </tags-input>
    Model: {{searchTags}}
    <br />
    <table class="table table-hover">
        <thead>
            <th>Group name</th>
            <th>Tags</th>
            <th>Type</th>
            <th>Looking for</th>
            <th class="col-sm-1">&nbsp;</th>
        </thead>
        <tr ng-repeat="match in allGroups | filterByTags:searchTags">
            <td>{{match.name}}</td>
            <td>
                <ul>
                    <li ng-repeat="tag in match.tags">{{tag}}</li>
                </ul>
            </td>
            <td>{{match.type}}</td>
            <td>
                <ul>
                    <li ng-repeat="deficit in match.deficits">{{deficit}}</li>
                </ul>
            </td>
            <td>
                <button class="btn btn-sm btn-default"><span class="glyphicon glyphicon-hand-left"></span></button>
            </td>
        </tr>
    </table>

JSON 看起来像这样：

[
        {name: "Elite", type: "Learning", tags: ["RWTH", "Aachen"], competences: ["Complexity"], deficits: ["Java"], members: ["Niklas", "Marv"]},
        {name: "Old Boys", type: "Assignments", tags: ["FH", "Aachen"], competences: ["Java"], deficits: ["AAT"], members: ["Joel", "Joel's Sister"]}
    ];

很遗憾，该表格没有被过滤。它总是打印出整个表格（即使没有我的修改）。我想我必须定义要过滤哪一列，但我对 AngularJS 或 JavaScript 一点都不熟悉。那么有什么建议吗？

【问题讨论】：

标签： angularjs filter ng-tags-input

【解决方案1】：

您必须在过滤功能中更改您的项目类型。

groupifyApp.filter('filterByTags', function () {
     return function (items, tags) {
            var filtered = [];
            (items || []).forEach(function (item) {
                var matches = tags.some(function (tag) {
                    return (item.name.indexOf(tag.text) > -1) ||
                           (item.type.indexOf(tag.text) > -1) ||
                           (item.tags.indexOf(tag.text) > -1) ||
                           ((item.competences).indexOf(tag.text) > -1) ||
                           ((item.members).indexOf(tag.text) > -1) ||
                           (item.deficits.indexOf(tag.text) > -1);
                });
                if (matches) {
                    filtered.push(item);
                }
            });
            if (tags.length == 0) {
                filtered = items;
            }
            return filtered;
        };
    });

希望这会有所帮助。顺便说一句，如果您的对象是整数，则必须将对象类型更改为字符串。具体来说：

{姓名：“精英”，年龄：18，类型：“学习”，标签：[“RWTH”，“亚琛”]，能力：[“复杂性”]，缺陷：[“Java”]，成员： [“尼克拉斯”，“马夫”]}，

 ((item.age+"").indexOf(tag.text) > -1) ||

【讨论】：

【解决方案2】：

我只想把你从任何地方得到的承诺都链接起来。在 HTML 中，您将在标签输入中拥有自动完成指令。 'filter.values'是已经填写的标签列表。

<tags-input ng-model="filter.values">
    <auto-complete load-on-down-arrow="true"
                   debounce-delay="0"
                   min-length="1"
                   source="getTagsFromAPI ($query, filter.id)">
    </auto-complete>
</tags-input>

我有一个名为“filterService”的服务，它有一个函数“getAutoCompleteList”，它从 API 返回所有可能的值：

$scope.getTagsFromAPI = function($query, filterId) {
    return filterService.getAutoCompleteList(filterId).then(function(result) {
         return _.filter(result, function(q){
            return _.contains(q.text, $query);
        });
    });
};

这个函数返回一个promise，我通过在is之后添加'.then()'来解决这个promise。然后我使用underscore 根据传入的'$query' 过滤结果。您也可以自己循环遍历列表并进行比较，但我喜欢为此使用下划线。由于promises have been chained，我可以简单地返回结果。

【讨论】：