Question

使用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。那么有什么建议吗？

Answer 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”]，成员： [“Niklas”，“Marv”]}，

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

Answer 2

我只想把你从任何地方回来的承诺联系起来。我HTML你在标签输入中有自动完成指令。＆＃39; filter.values＆＃39;是已填写的标签列表。

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

我有一项服务，我打电话给过滤服务＆＃39;它有一个函数＆＃39; getAutoCompleteList＆＃39;，它返回API中所有可能的值：

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

此函数返回一个承诺，我通过添加＆＃39; .then（）＆＃39;来解决承诺。之后是。然后我使用underscore根据＆＃39; $ query＆＃39;来过滤结果。传入。您也可以自己遍历列表并进行比较，但我喜欢使用下划线。自promises have been chained以来，我可以简单地返回结果。

在AngularJS中过滤ngtagsinput

2 个答案: