[英]How to filter objects in array by category key in Angular ng-repeat
I'm trying to use Angular filter to display only sorted tags by category 我正在尝试使用Angular过滤器按类别仅显示排序标签
Example of a tag object
in tags array
: 标签
array
标签 object
示例:
{
term: term,
id: id,
category: category
}
The ng-repeat tags: 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>
The sort by category radio buttons: “按类别排序”单选按钮:
<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>
In the sort radio button directive controller: 在排序单选按钮指令控制器中:
// 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);
});
I found out that filter is has it's own Angular module, so my question is, how do I get the category strings into this filter? 我发现过滤器具有它自己的Angular模块,所以我的问题是,如何将类别字符串放入此过滤器?
.filter('filterTags', function() {
return function(tags, category) {
return tags;
};
});
Here is where I capture the new category, how would I send the value into the filter above? 这是捕获新类别的地方,如何将值发送到上面的过滤器中?
$scope.$watch('catSort', function(value) {
console.log(value);
});
If I got it right. 如果我做对了。 You want to filter your tag object array by category.
您想按类别过滤标签对象数组。
You can call a scope method and return true if it matches the currently selected category. 您可以调用范围方法,如果它与当前选定的类别匹配,则返回true。 The parameter for this method will be a
tag
object of your ng-repeat. 此方法的参数将是ng-repeat的
tag
对象。 So you can do a check like return tag.category == $scope.catSort;
因此,您可以执行类似
return tag.category == $scope.catSort;
的检查return tag.category == $scope.catSort;
Please have a look at the demo below and here at jsFiddle . 请看下面的演示,这里是jsFiddle 。
(I've took sport categories just to have some dummy data.) (我采用运动类别只是为了获得一些虚拟数据。)
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.