AngularJS ng-repeat 中的自定义过滤器 Table
AngularJS Custom Filter in ng-repeat Table
我可以使用此自定义过滤器过滤 table(特定列)中的值。数据来自多个 select 输入
的数组
完整示例:
http://jsfiddle.net/d1sLj05t/1/
myApp.filter('filterMultiple',['$filter',function ($filter) {
return function (items, keyObj) {
var filterObj = {
data:items,
filteredData:[],
applyFilter : function(obj,key){
var fData = [];
if(this.filteredData.length == 0)
this.filteredData = this.data;
if(obj){
var fObj = {};
if(angular.isString(obj)){
fObj[key] = obj;
fData = fData.concat($filter('filter')(this.filteredData,fObj));
}else if(angular.isArray(obj)){
if(obj.length > 0){
for(var i=0;i<obj.length;i++){
if(angular.isString(obj[i])){
fObj[key] = obj[i];
fData = fData.concat($filter('filter')(this.filteredData,fObj));
}
}
}
}
if(fData.length > 0){
this.filteredData = fData;
}
}
}
};
if(keyObj){
angular.forEach(keyObj,function(obj,key){
filterObj.applyFilter(obj,key);
});
}
return filterObj.filteredData;
}
}]);
<tr ng-repeat="emp in empList | filterMultiple:{dept:selected}">
当 "sales" 或 "account" 等值存在时完美,但当 table、return 所有数据中不存在该值时(当我选择 "not" 或组合 "not" 和 "sales")。我期望只有 selected 值
的结果是空的
我认为您可以使用更简单的过滤器来完成您想要的。您可能想尝试这样的事情:
myApp.filter('filterMultiple',['$filter',function ($filter) {
return function (items, keyObj) {
//If the value isn't defined, don't filter at all.
if (keyObj.value == undefined) {
return items;
}
//Use javascript's native Array.filter() to get only the items that match.
return items.filter(function(item) {
//Keep any items whose specified attribute includes the selected value
return item[keyObj.column].includes(keyObj.value);
})
}
}]);
您的 HTML 略有变化:
<tr ng-repeat="emp in empList | filterMultiple:{column:'dept', value:selected}">
我不确定你所说的“结合 'not' 和 'sales'” 是什么意思,但我认为这会让你朝着正确的方向前进。
这里有一些相关链接,以防你不熟悉我在代码中所做的一些事情:
Documentation for Array.filter -- MDN
Array.filter is better than $filter('filter') -- Whosebug
我可以使用此自定义过滤器过滤 table(特定列)中的值。数据来自多个 select 输入
的数组完整示例: http://jsfiddle.net/d1sLj05t/1/
myApp.filter('filterMultiple',['$filter',function ($filter) {
return function (items, keyObj) {
var filterObj = {
data:items,
filteredData:[],
applyFilter : function(obj,key){
var fData = [];
if(this.filteredData.length == 0)
this.filteredData = this.data;
if(obj){
var fObj = {};
if(angular.isString(obj)){
fObj[key] = obj;
fData = fData.concat($filter('filter')(this.filteredData,fObj));
}else if(angular.isArray(obj)){
if(obj.length > 0){
for(var i=0;i<obj.length;i++){
if(angular.isString(obj[i])){
fObj[key] = obj[i];
fData = fData.concat($filter('filter')(this.filteredData,fObj));
}
}
}
}
if(fData.length > 0){
this.filteredData = fData;
}
}
}
};
if(keyObj){
angular.forEach(keyObj,function(obj,key){
filterObj.applyFilter(obj,key);
});
}
return filterObj.filteredData;
}
}]);
<tr ng-repeat="emp in empList | filterMultiple:{dept:selected}">
当 "sales" 或 "account" 等值存在时完美,但当 table、return 所有数据中不存在该值时(当我选择 "not" 或组合 "not" 和 "sales")。我期望只有 selected 值
的结果是空的我认为您可以使用更简单的过滤器来完成您想要的。您可能想尝试这样的事情:
myApp.filter('filterMultiple',['$filter',function ($filter) {
return function (items, keyObj) {
//If the value isn't defined, don't filter at all.
if (keyObj.value == undefined) {
return items;
}
//Use javascript's native Array.filter() to get only the items that match.
return items.filter(function(item) {
//Keep any items whose specified attribute includes the selected value
return item[keyObj.column].includes(keyObj.value);
})
}
}]);
您的 HTML 略有变化:
<tr ng-repeat="emp in empList | filterMultiple:{column:'dept', value:selected}">
我不确定你所说的“结合 'not' 和 'sales'” 是什么意思,但我认为这会让你朝着正确的方向前进。
这里有一些相关链接,以防你不熟悉我在代码中所做的一些事情:
Documentation for Array.filter -- MDN
Array.filter is better than $filter('filter') -- Whosebug