Is there any way to use an Angular filter to pare value with every value from an array?
Categories: <span ng-repeat="c in i.categories | filter: '!'+'myArray' ">{{c}}</span>
I would like to display values from i.categories that are not in myArray:
$scope.i = {
categories: [
"Europe & Eurasia",
"Featured",
"Headlines",
"Middle East",
"News",
"NEWS BY TOPIC",
"News Categories",
"REGIONAL NEWS"
]
};
$scope.myArray = ['Featured', 'Headlines', 'News'];
I want to get everything from c which is not contained in the myArray.
I've tried with writing some functions, but I get my app really slow, because of a lot requests.
So, can I just somehow pass my array, and let Angular goes through every single item in that array and pare it with the current value?
Is there any way to use an Angular filter to pare value with every value from an array?
Categories: <span ng-repeat="c in i.categories | filter: '!'+'myArray' ">{{c}}</span>
I would like to display values from i.categories that are not in myArray:
$scope.i = {
categories: [
"Europe & Eurasia",
"Featured",
"Headlines",
"Middle East",
"News",
"NEWS BY TOPIC",
"News Categories",
"REGIONAL NEWS"
]
};
$scope.myArray = ['Featured', 'Headlines', 'News'];
I want to get everything from c which is not contained in the myArray.
I've tried with writing some functions, but I get my app really slow, because of a lot requests.
So, can I just somehow pass my array, and let Angular goes through every single item in that array and pare it with the current value?
Share Improve this question edited Feb 20, 2017 at 13:33 Mistalis 18.3k14 gold badges77 silver badges97 bronze badges asked Feb 20, 2017 at 11:14 Nico LettermanNico Letterman 751 silver badge4 bronze badges 3- You can write a custom filter, check this JSFiddle for a working example – George Commented Feb 20, 2017 at 11:25
-
it depends on how
i.categorieslook like, just post it, is it a normal object or nested object or an array? – nivas Commented Feb 20, 2017 at 11:27 - @nivas I have updated my question with i.categories – Nico Letterman Commented Feb 20, 2017 at 11:36
2 Answers
Reset to default 6You can try to use a custom filter, like the following:
angular.module('myApp', []).filter('notInArray', function($filter) {
return function(list, arrayFilter) {
if(arrayFilter) {
return $filter("filter")(list, function(listItem) {
return arrayFilter.indexOf(listItem) == -1;
});
}
};
});
Use it like this:
<div ng-repeat='c in i.categories | notInArray:myArray'>{{c}}</div>
JSFiddle demo
angular.module('Test', []).filter('notInArray', function($filter) {
return function(list, arrayFilter) {
if(arrayFilter) {
return $filter("filter")(list, function(listItem) {
return arrayFilter.indexOf(listItem) == -1;
});
}
};
});
function Ctrl($scope) {
$scope.i = {categories: [
"Europe & Eurasia",
"Featured",
"Headlines",
"Middle East",
"News",
"NEWS BY TOPIC",
"News Categories",
"REGIONAL NEWS"
]};
$scope.myArray = ['Featured', 'Headlines', 'News'];
}<!DOCTYPE html>
<html ng-app='Test'>
<head>
<script src="http://code.angularjs/1.1.1/angular.min.js"></script>
<meta charset=utf-8 />
</head>
<body ng-controller='Ctrl'>
<div ng-repeat='c in i.categories | notInArray:myArray'>{{c}}</div>
</body>
</html>You can use like this also.
angular.module('App.filters', []).filter('panyFilter', [function () {
return function (arr, selArr) {
var retArr = [];
angular.forEach(arr, function(v, k){
var found =0;
for(var i=0; i<selArr.length; i++){
if(selArr[i] == v.name){
found = 1;
break;
}
}
if(found == 0){
retArr.push(v);
}
})
return retArr;
};
}]);
<div ng-controller="MyCtrl">
<div ng-repeat="c in categories|filter:customFilter">
{{c}}
</div>
</div>