我有2个嵌套的ng-repeats来填充这些类别下的类别和项目列表。我正在尝试实现搜索过滤器:
我试图实现一个custon过滤器来循环遍历类别,并根据项目的标题或类别的名称填充数组,但它会创建一个无限循环。
<li data-ng-repeat="group in vars.filteredCategories = (allCategories | customFilter:filters.searchText)">
{{group.category}}
<ul>
<li data-ng-repeat="item in group.items | orderBy:'title'">{{item.title}}</li>
</ul>
控制器:
$scope.allCategories = [{"category":"cat1","items":[{"id":10015,"title":"Test","category":"cat1"},{"category":"cat2","items":[{"id":10015,"title":"Test2","category":"cat2"}];
自定义过滤器(不起作用)
.filter('customFilter', function () {
return function (categories, search) {
var filtered = [];
var itemsPushed = [];
if (search !== '') {
angular.forEach(categories, function (category) {
if (category.category.toLowerCase().indexOf(search.toLowerCase()) !== -1) {
filtered.push(category);
} else {
if (angular.isDefined(category.items)) {
var itemsInside = angular.copy(category.items);
category.items = [];
for (var x = 0; x < itemsInside.length; x++) {
if (itemsInside[x].title.toLowerCase().indexOf(search.toLowerCase()) != -1 && itemsPushed.indexOf(itemsInside[x].id) == -1) {
category.items.push(itemsInside[x]);
itemsPushed.push(itemsInside[x].id);
}
}
filtered.push(category);
}
}
});
} else {
filtered = categories;
}
return filtered;
};
})
答案 0 :(得分:2)
检查这是否是您想要的http://plnkr.co/edit/zt2BJEpRv2EBbFf32rBC?p=preview
如果您想要不区分大小写的比较,可能需要修改代码。
控制器
app.controller('MainCtrl',function ($scope) {
$scope.filterText = '';
$scope.data = [
{"category":"cat1",
"items":[{"id":10015,"title":"Test","category":"cat1"}, {"id":10015,"title":"Other","category":"cat1"}]
},
{"category":"cat2",
"items":[{"id":10015,"title":"Test2","category":"cat2"}]
}];
});
过滤
app.filter('customFilter', function(){
return function(data, searchString) {
if (searchString === '') {
return data;
}
// don't modify original state
var newData = [];
data.forEach(function(group){
// If the name of the category contains the string of the search filters,
// this category should be displayed. If non of the items under this category match the filter,
// all the items under the category should be displayed.
var matchCategory = group.category.indexOf(searchString) > -1;
var nonItemMatches = group.items.every(function(item){
return item.title.indexOf(searchString) === -1;
});
if (matchCategory || nonItemMatches) {
newData.push(group);
return
}
// If the title of an item contains the string of the search filter,
// this item and its category should be displayed.
var groupCustomItems = angular.extend({}, group);
groupCustomItems.items = [];
group.items.forEach(function(item) {
if (item.title.indexOf(searchString) > -1) {
groupCustomItems.items.push(item);
}
});
if (groupCustomItems.items.length) {
newData.push(groupCustomItems);
}
});
return newData;
};
});
查看
<input type="text" ng-model="filterText" />
<ul>
<li ng-repeat="group in data | customFilter:filterText">
{{ group.category }}
<ul>
<li ng-repeat="item in group.items">
{{ item.title }}
</li>
</ul>
</ul>
我不得不假设您的数据有误,因为它与您的html视图不匹配
您可能需要阅读filter文档