如何在Angular ng-repeat中按類別鍵過濾數組中的對象

Question

我正在嘗試使用Angular過濾器按類別僅顯示排序標簽

標簽 array 標簽 object示例：

{
    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;的檢查return tag.category == $scope.catSort;

請看下面的演示，這里是jsFiddle 。

（我采用運動類別只是為了獲得一些虛擬數據。）

 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; }; }); 

 ul { list-style-type: none; } 

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