angularjs 自定义过滤器以检查数据数组中的值
angularjs custom filter to check for values inside a data array
我有两个过滤器,它们根据数据中的队列键过滤数据。
这是我的代码:
var app = angular.module('app', []);
app.controller('mainController', function($scope) {
// Data object
$scope.servers = [{
name: 'ServerA',
queue: '111'
},
{
name: 'Server7',
queue: '111'
},
{
name: 'Server2',
queue: '456'
},
{
name: 'ServerB',
queue: '456'
},
];
// Filter defaults
$scope.Filter = new Object();
$scope.Filter.queue = {
'PAV': '111',
'UAT': '456'
};
});
// Global search filter
app.filter('searchFilter', function($filter) {
return function(items, searchfilter) {
var isSearchFilterEmpty = true;
angular.forEach(searchfilter, function(searchstring) {
if (searchstring != null && searchstring != "") {
isSearchFilterEmpty = false;
}
});
if (!isSearchFilterEmpty) {
var result = [];
angular.forEach(items, function(item) {
var isFound = false;
angular.forEach(item, function(term, key) {
if (term != null && !isFound) {
term = term.toString();
term = term.toLowerCase();
angular.forEach(searchfilter, function(searchstring) {
searchstring = searchstring.toLowerCase();
if (searchstring != "" && term.indexOf(searchstring) != -1 && !isFound) {
result.push(item);
isFound = true;
}
});
}
});
});
return result;
} else {
return items;
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.3/angular.min.js"></script>
<div ng-app="app">
<div ng-controller="mainController">
<label>show 111</label>
<input type="checkbox" ng-model="Filter.queue.PAV" ng-true-value='"111"' ng-false-value='"!111"' />
<label>show 456</label>
<input type="checkbox" ng-model="Filter.queue.UAT" ng-true-value='"456"' ng-false-value='"!456"' />
<hr />
<table width="100%" cellpadding="5">
<tr>
<th>Name</th>
<th>Queue</th>
</tr>
<tr ng-repeat="server in servers | searchFilter:Filter.queue">
<td>{{server.name}}</td>
<td>{{server.queue}}</td>
</tr>
</table>
</div>
</div>
过滤器完美运行。
但是如果我有这样的数据,队列在一个数组中:
$scope.servers = [
{name:'ServerA', queuearr:[{'queue' :'111'}]},
{name:'Server7', queuearr:[{'queue' :'111'}]},
{name:'Server2', queuearr:[{'queue' :'456'}]},
{name:'ServerB', queuearr:[{'queue' :'456'}]},
];
note : there can be multiple objects in the queuerr like
this:[{queue :'111'},{queue :'278'}]
如何更改我当前的代码,以便控件进入 queuerr 数组并匹配队列和 return 相应的结果?
我想你可以这样做。目前尚不清楚您到底想做什么,因为您的代码过于复杂且排列不当。
app.filter('searchFilter',function($filter) {
return function(items, searchfilter) {
const terms = Object.values(searchfilter).map(
(val)=>val.toLowerCase(),
);
return items.filter((item) =>
item.queuearr.some((q) => terms.includes(q.queue.toLowerCase())),
);
};
}
如果您想使用队列的值过滤 $scope.servers,您可以试试这个。希望这有帮助。
const servers = [
{name:'ServerA', queuearr:[{'queue' :'111'}]},
{name:'Server7', queuearr:[{'queue' :'111'}]},
{name:'Server2', queuearr:[{'queue' :'456'}]},
{name:'ServerB', queuearr:[{'queue' :'456'}]},
];
const itemsToCheck = { 'PAV':'111', 'UAT':'426' };
const filter = (arr, itemsToCheck) => arr.filter((item) => {
for (let v of Object.values(itemsToCheck)) {
const found = item.queuearr.find(({ queue }) => queue === v);
if (found) return true;
}
return false;
});
console.log(filter(servers, itemsToCheck));
当 queue
在数组中时,我通过添加另一个 forEach 循环来遍历 queuearr
解决了这个问题:
var app =angular.module('app', []);
app.controller('mainController', function($scope) {
// Data object
$scope.servers = [
{name:'ServerA', queuearr:[{'queue' :'111'},{'queue' :'456'}]},
{name:'Server7', queuearr:[{'queue' :'111'}]},
{name:'Server2', queuearr:[{'queue' :'456'}]},
{name:'ServerB', queuearr:[{'queue' :'456'}]},
];
// Filter defaults
$scope.Filter = new Object();
$scope.Filter.queue = {'PAV':'111',
'UAT':'456'
};
});
// Global search filter
app.filter('searchFilter',function($filter) {
return function(items,searchfilter) {
//console.log(items);
var isSearchFilterEmpty = true;
angular.forEach(searchfilter, function(searchstring) {
if(searchstring !=null && searchstring !=""){
isSearchFilterEmpty= false;
}
});
if(!isSearchFilterEmpty){
var result = [];
angular.forEach(items, function(item) {
var isFound = false;
angular.forEach(item.queuearr, function(z) {
//console.log(item.queue);
angular.forEach(z, function(term,key) {
//console.log(z);
//console.log(item.queue);
if(term != null && !isFound){
term = term.toString();
term = term.toLowerCase();
angular.forEach(searchfilter, function(searchstring) {
//console.log(searchfilter);
searchstring = searchstring.toLowerCase();
if(searchstring !="" && term.indexOf(searchstring) !=-1 && !isFound){
result.push(item);
isFound = true;
}
});
}
});
});
});
return result;
}else{
return items;
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.4/angular.min.js"></script>
<div ng-app="app">
<div ng-controller="mainController">
<label>show 111</label>
<input type="checkbox" ng-model="Filter.queue.PAV" ng-true-value='"111"' ng-false-value='""' />
<label>show 456</label>
<input type="checkbox" ng-model="Filter.queue.UAT" ng-true-value='"456"' ng-false-value='""' />
<hr />
<table width="100%" cellpadding="5">
<tr>
<th>Name</th>
</tr>
<tr ng-repeat="server in servers | searchFilter:Filter.queue">
<td>{{server.name}}</td>
</tr>
</table>
</div>
</div>
现在一切正常
我已经根据您给定的数组修改了您的代码段。它可以根据您的需要正常工作。
var app = angular.module('app', []);
app.controller('mainController', function($scope) {
// Data object
/*
$scope.servers = [{
name: 'ServerA',
queue: '111'
},
{
name: 'Server7',
queue: '111'
},
{
name: 'Server2',
queue: '456'
},
{
name: 'ServerB',
queue: '456'
},
];
*/
$scope.servers = [
{name:'ServerA', queuearr:[{'queue' :'111'}]},
{name:'Server7', queuearr:[{'queue' :'111'}]},
{name:'Server2', queuearr:[{'queue' :'456'}]},
{name:'ServerB', queuearr:[{'queue' :'456'}]},
];
// Filter defaults
$scope.Filter = new Object();
$scope.Filter.queue = {
'PAV': '111',
'UAT': '456'
};
});
// Global search filter
app.filter('searchFilter', function($filter) {
return function(items, searchfilter) {
var isSearchFilterEmpty = true;
angular.forEach(searchfilter, function(searchstring) {
if (searchstring != null && searchstring != "") {
isSearchFilterEmpty = false;
}
});
if (!isSearchFilterEmpty) {
var result = [];
angular.forEach(items, function(item) {
var isFound = false;
angular.forEach(item.queuearr, function(term, key) {
if (term.queue != null && !isFound) {
term.queue = term.queue.toString();
term.queue = term.queue.toLowerCase();
angular.forEach(searchfilter, function(searchstring) {
searchstring = searchstring.toLowerCase();
if (searchstring != "" &&
term.queue.indexOf(searchstring) != -1 &&
!isFound) {
result.push(item);
isFound = true;
}
});
}
});
});
return result;
} else {
return items;
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.3/angular.min.js"></script>
<div ng-app="app">
<div ng-controller="mainController">
<label>show 111</label>
<input type="checkbox" ng-model="Filter.queue.PAV" ng-true-value='"111"' ng-false-value='"!111"' />
<label>show 456</label>
<input type="checkbox" ng-model="Filter.queue.UAT" ng-true-value='"456"' ng-false-value='"!456"' />
<hr />
<table width="100%" cellpadding="5">
<tr>
<th>Name</th>
<th>Queue</th>
</tr>
<tr ng-repeat="server in servers | searchFilter:Filter.queue">
<td>{{server.name}}</td>
<td>{{server.queuearr[0].queue}}</td>
</tr>
</table>
</div>
</div>
你有一些条件需要改变Angular.forEach
看看解决方案。
ServerB 出现在两次搜索中
var app = angular.module('app', []);
app.controller('mainController', function($scope) {
// Data object
$scope.servers = [{
name: 'ServerA',
queue: '111'
},
{
name: 'Server7',
queue: '111'
},
{
name: 'Server2',
queue: '456'
},
{
name: 'ServerB',
queue: '456',
queuearr: [{
queue: '456'
}, {
queue: '111'
}]
},
];
// Filter defaults
$scope.Filter = new Object();
$scope.Filter.queue = {
'PAV': '111',
'UAT': '456'
};
});
// Global search filter
app.filter('searchFilter', function($filter) {
return function(items, searchfilter) {
var isSearchFilterEmpty = true;
angular.forEach(searchfilter, function(searchstring) {
if (searchstring != null && searchstring != "") {
isSearchFilterEmpty = false;
}
});
if (!isSearchFilterEmpty) {
var result = [];
angular.forEach(items, function(item) {
var isFound = false;
angular.forEach(item, function(term, key) {
// change here to check for arrays
if (term || Array.isArray(term) && !isFound) {
// use JSON.stringify here
term = JSON.stringify(term);
term = term.toLowerCase();
angular.forEach(searchfilter, function(searchstring) {
searchstring = searchstring.toLowerCase();
if (searchstring != "" && term.indexOf(searchstring) != -1 && !isFound) {
result.push(item);
isFound = true;
}
});
}
});
});
return result;
} else {
return items;
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.3/angular.min.js"></script>
<div ng-app="app">
<div ng-controller="mainController">
<label>show 111</label>
<input type="checkbox" ng-model="Filter.queue.PAV" ng-true-value='"111"' ng-false-value='"!111"' />
<label>show 456</label>
<input type="checkbox" ng-model="Filter.queue.UAT" ng-true-value='"456"' ng-false-value='"!456"' />
<hr />
<table width="100%" cellpadding="5">
<tr>
<th>Name</th>
<th>Queue</th>
</tr>
<tr ng-repeat="server in servers | searchFilter:Filter.queue">
<td>{{server.name}}</td>
<td>{{server.queue}}</td>
</tr>
</table>
</div>
</div>
我有两个过滤器,它们根据数据中的队列键过滤数据。 这是我的代码:
var app = angular.module('app', []);
app.controller('mainController', function($scope) {
// Data object
$scope.servers = [{
name: 'ServerA',
queue: '111'
},
{
name: 'Server7',
queue: '111'
},
{
name: 'Server2',
queue: '456'
},
{
name: 'ServerB',
queue: '456'
},
];
// Filter defaults
$scope.Filter = new Object();
$scope.Filter.queue = {
'PAV': '111',
'UAT': '456'
};
});
// Global search filter
app.filter('searchFilter', function($filter) {
return function(items, searchfilter) {
var isSearchFilterEmpty = true;
angular.forEach(searchfilter, function(searchstring) {
if (searchstring != null && searchstring != "") {
isSearchFilterEmpty = false;
}
});
if (!isSearchFilterEmpty) {
var result = [];
angular.forEach(items, function(item) {
var isFound = false;
angular.forEach(item, function(term, key) {
if (term != null && !isFound) {
term = term.toString();
term = term.toLowerCase();
angular.forEach(searchfilter, function(searchstring) {
searchstring = searchstring.toLowerCase();
if (searchstring != "" && term.indexOf(searchstring) != -1 && !isFound) {
result.push(item);
isFound = true;
}
});
}
});
});
return result;
} else {
return items;
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.3/angular.min.js"></script>
<div ng-app="app">
<div ng-controller="mainController">
<label>show 111</label>
<input type="checkbox" ng-model="Filter.queue.PAV" ng-true-value='"111"' ng-false-value='"!111"' />
<label>show 456</label>
<input type="checkbox" ng-model="Filter.queue.UAT" ng-true-value='"456"' ng-false-value='"!456"' />
<hr />
<table width="100%" cellpadding="5">
<tr>
<th>Name</th>
<th>Queue</th>
</tr>
<tr ng-repeat="server in servers | searchFilter:Filter.queue">
<td>{{server.name}}</td>
<td>{{server.queue}}</td>
</tr>
</table>
</div>
</div>
过滤器完美运行。
但是如果我有这样的数据,队列在一个数组中:
$scope.servers = [
{name:'ServerA', queuearr:[{'queue' :'111'}]},
{name:'Server7', queuearr:[{'queue' :'111'}]},
{name:'Server2', queuearr:[{'queue' :'456'}]},
{name:'ServerB', queuearr:[{'queue' :'456'}]},
];
note : there can be multiple objects in the queuerr like this:
[{queue :'111'},{queue :'278'}]
如何更改我当前的代码,以便控件进入 queuerr 数组并匹配队列和 return 相应的结果?
我想你可以这样做。目前尚不清楚您到底想做什么,因为您的代码过于复杂且排列不当。
app.filter('searchFilter',function($filter) {
return function(items, searchfilter) {
const terms = Object.values(searchfilter).map(
(val)=>val.toLowerCase(),
);
return items.filter((item) =>
item.queuearr.some((q) => terms.includes(q.queue.toLowerCase())),
);
};
}
如果您想使用队列的值过滤 $scope.servers,您可以试试这个。希望这有帮助。
const servers = [
{name:'ServerA', queuearr:[{'queue' :'111'}]},
{name:'Server7', queuearr:[{'queue' :'111'}]},
{name:'Server2', queuearr:[{'queue' :'456'}]},
{name:'ServerB', queuearr:[{'queue' :'456'}]},
];
const itemsToCheck = { 'PAV':'111', 'UAT':'426' };
const filter = (arr, itemsToCheck) => arr.filter((item) => {
for (let v of Object.values(itemsToCheck)) {
const found = item.queuearr.find(({ queue }) => queue === v);
if (found) return true;
}
return false;
});
console.log(filter(servers, itemsToCheck));
当 queue
在数组中时,我通过添加另一个 forEach 循环来遍历 queuearr
解决了这个问题:
var app =angular.module('app', []);
app.controller('mainController', function($scope) {
// Data object
$scope.servers = [
{name:'ServerA', queuearr:[{'queue' :'111'},{'queue' :'456'}]},
{name:'Server7', queuearr:[{'queue' :'111'}]},
{name:'Server2', queuearr:[{'queue' :'456'}]},
{name:'ServerB', queuearr:[{'queue' :'456'}]},
];
// Filter defaults
$scope.Filter = new Object();
$scope.Filter.queue = {'PAV':'111',
'UAT':'456'
};
});
// Global search filter
app.filter('searchFilter',function($filter) {
return function(items,searchfilter) {
//console.log(items);
var isSearchFilterEmpty = true;
angular.forEach(searchfilter, function(searchstring) {
if(searchstring !=null && searchstring !=""){
isSearchFilterEmpty= false;
}
});
if(!isSearchFilterEmpty){
var result = [];
angular.forEach(items, function(item) {
var isFound = false;
angular.forEach(item.queuearr, function(z) {
//console.log(item.queue);
angular.forEach(z, function(term,key) {
//console.log(z);
//console.log(item.queue);
if(term != null && !isFound){
term = term.toString();
term = term.toLowerCase();
angular.forEach(searchfilter, function(searchstring) {
//console.log(searchfilter);
searchstring = searchstring.toLowerCase();
if(searchstring !="" && term.indexOf(searchstring) !=-1 && !isFound){
result.push(item);
isFound = true;
}
});
}
});
});
});
return result;
}else{
return items;
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.4/angular.min.js"></script>
<div ng-app="app">
<div ng-controller="mainController">
<label>show 111</label>
<input type="checkbox" ng-model="Filter.queue.PAV" ng-true-value='"111"' ng-false-value='""' />
<label>show 456</label>
<input type="checkbox" ng-model="Filter.queue.UAT" ng-true-value='"456"' ng-false-value='""' />
<hr />
<table width="100%" cellpadding="5">
<tr>
<th>Name</th>
</tr>
<tr ng-repeat="server in servers | searchFilter:Filter.queue">
<td>{{server.name}}</td>
</tr>
</table>
</div>
</div>
现在一切正常
我已经根据您给定的数组修改了您的代码段。它可以根据您的需要正常工作。
var app = angular.module('app', []);
app.controller('mainController', function($scope) {
// Data object
/*
$scope.servers = [{
name: 'ServerA',
queue: '111'
},
{
name: 'Server7',
queue: '111'
},
{
name: 'Server2',
queue: '456'
},
{
name: 'ServerB',
queue: '456'
},
];
*/
$scope.servers = [
{name:'ServerA', queuearr:[{'queue' :'111'}]},
{name:'Server7', queuearr:[{'queue' :'111'}]},
{name:'Server2', queuearr:[{'queue' :'456'}]},
{name:'ServerB', queuearr:[{'queue' :'456'}]},
];
// Filter defaults
$scope.Filter = new Object();
$scope.Filter.queue = {
'PAV': '111',
'UAT': '456'
};
});
// Global search filter
app.filter('searchFilter', function($filter) {
return function(items, searchfilter) {
var isSearchFilterEmpty = true;
angular.forEach(searchfilter, function(searchstring) {
if (searchstring != null && searchstring != "") {
isSearchFilterEmpty = false;
}
});
if (!isSearchFilterEmpty) {
var result = [];
angular.forEach(items, function(item) {
var isFound = false;
angular.forEach(item.queuearr, function(term, key) {
if (term.queue != null && !isFound) {
term.queue = term.queue.toString();
term.queue = term.queue.toLowerCase();
angular.forEach(searchfilter, function(searchstring) {
searchstring = searchstring.toLowerCase();
if (searchstring != "" &&
term.queue.indexOf(searchstring) != -1 &&
!isFound) {
result.push(item);
isFound = true;
}
});
}
});
});
return result;
} else {
return items;
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.3/angular.min.js"></script>
<div ng-app="app">
<div ng-controller="mainController">
<label>show 111</label>
<input type="checkbox" ng-model="Filter.queue.PAV" ng-true-value='"111"' ng-false-value='"!111"' />
<label>show 456</label>
<input type="checkbox" ng-model="Filter.queue.UAT" ng-true-value='"456"' ng-false-value='"!456"' />
<hr />
<table width="100%" cellpadding="5">
<tr>
<th>Name</th>
<th>Queue</th>
</tr>
<tr ng-repeat="server in servers | searchFilter:Filter.queue">
<td>{{server.name}}</td>
<td>{{server.queuearr[0].queue}}</td>
</tr>
</table>
</div>
</div>
你有一些条件需要改变Angular.forEach
看看解决方案。
ServerB 出现在两次搜索中
var app = angular.module('app', []);
app.controller('mainController', function($scope) {
// Data object
$scope.servers = [{
name: 'ServerA',
queue: '111'
},
{
name: 'Server7',
queue: '111'
},
{
name: 'Server2',
queue: '456'
},
{
name: 'ServerB',
queue: '456',
queuearr: [{
queue: '456'
}, {
queue: '111'
}]
},
];
// Filter defaults
$scope.Filter = new Object();
$scope.Filter.queue = {
'PAV': '111',
'UAT': '456'
};
});
// Global search filter
app.filter('searchFilter', function($filter) {
return function(items, searchfilter) {
var isSearchFilterEmpty = true;
angular.forEach(searchfilter, function(searchstring) {
if (searchstring != null && searchstring != "") {
isSearchFilterEmpty = false;
}
});
if (!isSearchFilterEmpty) {
var result = [];
angular.forEach(items, function(item) {
var isFound = false;
angular.forEach(item, function(term, key) {
// change here to check for arrays
if (term || Array.isArray(term) && !isFound) {
// use JSON.stringify here
term = JSON.stringify(term);
term = term.toLowerCase();
angular.forEach(searchfilter, function(searchstring) {
searchstring = searchstring.toLowerCase();
if (searchstring != "" && term.indexOf(searchstring) != -1 && !isFound) {
result.push(item);
isFound = true;
}
});
}
});
});
return result;
} else {
return items;
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.3/angular.min.js"></script>
<div ng-app="app">
<div ng-controller="mainController">
<label>show 111</label>
<input type="checkbox" ng-model="Filter.queue.PAV" ng-true-value='"111"' ng-false-value='"!111"' />
<label>show 456</label>
<input type="checkbox" ng-model="Filter.queue.UAT" ng-true-value='"456"' ng-false-value='"!456"' />
<hr />
<table width="100%" cellpadding="5">
<tr>
<th>Name</th>
<th>Queue</th>
</tr>
<tr ng-repeat="server in servers | searchFilter:Filter.queue">
<td>{{server.name}}</td>
<td>{{server.queue}}</td>
</tr>
</table>
</div>
</div>