我已经从对象数组生成了一个动态表,并使用angular-ui-bootstrap对这些行进行了分页。我还需要根据用户选择在表中实现行过滤功能。例如,我将从复选框中选择一个或多个城市,并且只显示具有匹配城市的行,或者用户将选择某些名称或两者的组合。以下是样本数据:
ctrl.data = [{
id: 1,
name: 'Ram Kumar',
city: 'Delhi',
date: new Date("October 13, 2014 11:13:00")
}, {
id: 2,
name: 'Raman Kumar',
city: 'Mumbai',
date: new Date("November 13, 2014 11:13:00")
}, {
id: 3,
name: 'Raghav Kumar',
city: 'Chennai',
date: new Date("December 13, 2014 11:13:00")
}];
我还创建了一个元数据,其中包含有关数据的所有属性的信息,例如属性名称,它的唯一值,此属性所需的过滤器类型,即复选框或滑块。以下是元数据:
ctrl.metadata = [{
name: "ID",
values: [1, 2, 3],
type: "checkbox",
showFilter: false
}, {
name: "Name",
type: "checkbox",
values: ["Ram Kumar", "Raman Kumar", "Raghav Kumar"],
showFilter: false
}, {
name: "City",
type: "checkbox",
values: ["Delhi", "Mumbai", "Chennai"],
showFilter: true
}, {
name: "Birth Date",
type: "date",
showFilter: false
}, {
name: "Age",
type: "slider",
values: [18,26],
showFilter: false
}];
我目前为某些属性(如ID,名称和城市)制作了单值静态过滤器查询变量。
<div ng-repeat="attr in metadata">
<div ng-if="attr.name === 'ID'">
Enter Filter:
<input type="textbox" ng-model="search.id" />
</div>
<div ng-if="attr.name === 'City'">
Enter Filter:
<input type="textbox" ng-model="search.city" />
</div>
<div>
我正在以这种方式将此过滤器应用于表行:
<tr ng-repeat="row in data | filter: search | pages: currentPage : itemsPerPage">
<td ng-repeat="item in row">{{ item }}</td>
</tr>
但首先,我希望动态生成过滤器查询变量(搜索),因为数据和元数据可能会发生变化。如果可能的话,如下所示:
<div ng-repeat="attr in metadata">
<div ng-if="attr.name === 'ID'">
Enter Filter:
<input type="textbox" ng-model="attr.searchQuery" />
</div>
</div>
我将搜索查询附加到名为searchQuery的元数据对象属性。但是当我尝试在过滤器中使用它时,我看不到结果:
<tr ng-repeat="row in data | filter: metadata[$index].searchQuery | pages: vm.currentPage : vm.itemsPerPage">
<td ng-repeat="item in row">{{ item }}</td>
</tr>
其次,搜索查询只能使用一个字符串,但由于我希望过滤器基于多个值,我该如何实现呢?我研究了自定义过滤器,但问题是,如何“记录”所选值,然后将其发送到过滤器(例如,从复选框中获取所有选定的城市)?我必须使每个变量动态或部分元数据,以便在更改任何数量的属性或属性或值的名称时不会中断。当数据发生变化时,可能没有城市而是国家,所以不能做任何静态的事情。
请提出一些实施方案。 Here is a working plunker.
答案 0 :(得分:1)
首先,您应该将<input>
更改为:
<input type="checkbox" ng-model="vm.selected[$index]" ng-true-value="'{{value}}'" ng-false-value="" /> {{value}}
然后是您的ng-repeat
:
<tr ng-repeat="row in vm.data | filter: vm.search | customFilter: vm.selected | pages: vm.currentPage : vm.itemsPerPage">
最后,您可以实现custom filter
来实现您想要的目标,例如:
.filter('customFilter', function() {
return function(items, search) {
if (!search || (Object.keys(JSON.parse(JSON.stringify(search))).length === 0 && search.constructor === Object)) {
return items;
}
var selected = Object.keys(search).map(function(key) {
return search[key]
});
items = items.filter(function(value) {
return selected.indexOf(value.city) != -1;
});
return items;
}
});
检查完整的code
我希望它有所帮助。
提示:我不知道您是否在实际项目中使用了ui-bootstrap
这些内容,但他们已经弃用了,因为您可以在控制台中看到:
PaginationController现已弃用。使用UibPaginationController 代替。分页现已弃用。改为使用uib-pagination。