How to filter ng-repeat with values NOT IN another array in Angular?

Question

Is there any way to use an Angular filter to compare 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 compare it with the current value?

You can write a custom filter, check this JSFiddle for a working example — George
– George, Commented Feb 20, 2017 at 11:25
it depends on how i.categories look like, just post it, is it a normal object or nested object or an array? — nivas
– nivas, Commented Feb 20, 2017 at 11:27

Mistalis · Accepted Answer · 2017-02-20 13:32:27Z

6

You 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.org/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>

edited Feb 20, 2017 at 13:32

answered Feb 20, 2017 at 12:59

Mistalis

18.3k14 gold badges78 silver badges97 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Nico Letterman Over a year ago

That's what I want! :) But, how to apply this on my example, take a look at the array on which my filter has to be applied. I have no id's. It is not an object, it is array..

Nico Letterman Over a year ago

That's it. Thanks mate! Cheers

Indhu · Accepted Answer · 2017-02-20 11:33:46Z

1

You can use like this also.

angular.module('App.filters', []).filter('companyFilter', [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>

answered Feb 20, 2017 at 11:33

Indhu

3991 gold badge6 silver badges19 bronze badges

2 Comments

Nico Letterman Over a year ago

Hey @Indhu, Thanks for the answer. I'm wondering where should I add my array, or how could I call it in the given filter? Thanks I have called the filter in '<div ng-repeat="c in categories| filter:companyFilter"> {{c}} </div>'

Indhu Over a year ago

<div ng-repeat="c in categories | companyFilter :customFilter">

Collectives™ on Stack Overflow

How to filter ng-repeat with values NOT IN another array in Angular?

2 Answers 2

JSFiddle demo

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related