Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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?

like image 847
Nico Letterman Avatar asked Feb 20 '17 11:02

Nico Letterman


People also ask

How do you put filters on NG-repeat?

The ng-repeat values can be filtered according to the ng-model in AngularJS by using the value of the input field as an expression in a filter. We can set the ng-model directive on an input field to filter ng-repeat values.

What can I use instead of NG-repeat?

You can consider using transclusion inside a custom directive, to achieve the behavior you are looking for without using ng-repeat.

How do I get the index of an element in NG-repeat?

Note: The $index variable is used to get the Index of the Row created by ng-repeat directive. Each row of the HTML Table consists of a Button which has been assigned ng-click directive. The $index variable is passed as parameter to the GetRowIndex function.

What is correct way to apply multiple filters in angular?

Answer: A is the correct option. The syntax of applying multiple filters in AngularJS can be written as: {{ expression | filter1 | filter2 | ... }}


1 Answers

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>
like image 91
Mistalis Avatar answered Oct 18 '22 00:10

Mistalis