如何在Angular ng-repeat中按类别键过滤数组中的对象

Question

我尝试使用Angular过滤器按类别

仅显示已排序的标签

标记 object中标记 array的示例：

{
    term: term,
    id: id,
    category: category
}

ng-repeat标签：

<li ng-repeat="(k, m) in tags | filter: filterTags | orderBy:predicate:reverse"
    ng-class="{'selected': m.selected}"
    ng-click="selectTag(m)">    
    <div class="tag">{{m.term}}</div>
</li>

按类别排序单选按钮：

<div class="category-selection">
    <ul>
        <li>
            <input type="radio" ng-model="catSort" name="brand" value="brand">
            Brand
        </li>
        <li>
            <input type="radio" ng-model="catSort" name="client" value="client">
            Client
       </li>

在排序单选按钮指令控制器中：

// Detect category sort
// Then apply the value to the filter function:

$scope.$watch('catSort', function(value) {
    console.log(value);
    tagsPanel = ScopeFactory.getScope('tagsPanel');
    tagsPanel.filterTags(value);
}); 

我发现过滤器有自己的Angular模块，所以我的问题是，如何将类别字符串放入此过滤器？

.filter('filterTags', function() {
    return function(tags, category) {
        return tags;
    };
});

这是我捕获新类别的位置，我如何将值发送到上面的过滤器？

$scope.$watch('catSort', function(value) {
    console.log(value);
}); 

Answer 1

如果我做对了。您希望按类别过滤标记对象数组。

您可以调用范围方法，如果它与当前选定的类别匹配，则返回true。此方法的参数将是ng-repeat的tag对象。所以你可以像return tag.category == $scope.catSort;

那样进行检查

请查看下面的演示，并点击此处jsFiddle。

（我已经将体育类别用于获取一些虚拟数据。）

＆＃13;

＆＃13;

angular.module('myApp', [])
    .controller('mainCtrl', function ($scope) {
    $scope.catSort = "football";
    $scope.tags = [{
        term: 'foot1',
        id: 'id',
        category: 'football'
    }, {
        term: 'foot2',
        id: 'id2',
        category: 'football'
    }, {
        term: 'base1',
        id: 'id',
        category: 'baseball'
    }, {
        term: 'base2',
        id: 'id2',
        category: 'baseball'
    }, ];

    $scope.filterTags = function (tag) {
        //console.log(tag, $scope.catSort);
        return tag.category == $scope.catSort;
    };
});

＆＃13;

ul {
    list-style-type: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="mainCtrl">Filter by category:
    <div class="category-selection">
        <ul>
            <li>
                <input type="radio" ng-model="catSort" name="football" value="football" />Football</li>
            <li>
                <input type="radio" ng-model="catSort" name="baseball" value="baseball" />Baseball</li>
        </ul>
    </div>Teams:
    <ul>
        <li ng-repeat="(index, tag) in tags | filter: filterTags" ng-class="{'selected': tag.selected}" ng-click="selectTag(tag)">
            <div class="tag">{{tag.term}}</div>
        </li>
    </ul>
</div>

＆＃13;

＆＃13;

＆＃13;