Angularjs: How to apply NOT filter?

Question

How to apply a NOT filter in the following example?

Tried $filter('filter')(users,{ranks: {id: '!' + '15'},true) and $filter('filter')(users, !{ranks: {id:15}},true) but nothing seems to work.

The aim here is to not get user with id = 15 in the filtered array

Controller:

app.controller('MainCtrl', function($scope,$filter) {

  $scope.users = [
    {
      id: 1,
      name: 'John Doe',
      ranks: [ 
        { id: 1, name: 'Admin'},
        { id: 2, name: 'Doe' }
        ],
    },
    {
      id: 2,
      name: 'Barbara Doe',
      ranks: [ { id: 15, name: 'Wife'}, { id: 2, name: 'Doe' }],
    },
    {
      id: 3,
      name: 'Jane Doe',
      ranks: [ { id: 16, name: 'Wife'}, { id: 17, name: 'Doe' }],
    },
  ];

  $scope.filter = $filter('filter')($scope.users, {ranks: {id: !15}},true);


});

HTML:

<p>HTML Filter: List of users without having a rank with id: 15</p>
    <ul>
      <li ng-repeat="user in users | filter:{ranks: {id: '!' + '15'}} : true"> 
        {{ user }}
      </li>
    </ul>

    <p>Controller Filter: List of users without having a rank with id: 15</p>
    <ul>
      <li ng-repeat="user in filter "> 
        {{ user }}
      </li>
    </ul>

Plunker: http://plnkr.co/edit/73lLDpn3uLHozObKn539?p=preview

@Tushar Tried this $scope.filter = $filter('filter')($scope.users, ranks.id != 15,true); But it is invalid syntax — Shyamal Parikh
– Shyamal Parikh, Commented Oct 16, 2015 at 7:05

bakkal · Accepted Answer · 2015-10-16 07:42:23Z

2

You are trying to filter out users where their ranks property contains {id: 15}, you may not have a choice but to write a custom filter, or a predicate function to do that (because this is not a traditional == or != comparison)

Here's an example using a predicate function:

     ranksContainsId15 = function(user, index, users){
        // Look for rank.id === 15
        for(var i=0; i < user.ranks.length; i++){
          if(user.ranks[i].id === 15){
            return false; // so this user will NOT be included
          }
        }

        // no rank.id === 15 found, so this user will be included
        return true;
      }

      $scope.filtered = $filter('filter')($scope.users, ranksContainsId15);

I've updated the example to show all users, then show users that don't have a rank.id == 15 in their ranks array

http://plnkr.co/edit/6x3OEzSiDfIziAnVQ0Em?p=preview

To create predicate functions with a programmable ID, use a function to create them

createPredicateFn = function(id){
    return function(user, index, users){
            for(var i=0; i < user.ranks.length; i++){
              if(user.ranks[i].id === id){
                return false;
              }
            }

            return true;
    }
}

$scope.filtered = $filter('filter')($scope.users, createPredicateFn(15));

edited Oct 16, 2015 at 7:42

answered Oct 16, 2015 at 7:34

bakkal

55.6k12 gold badges136 silver badges113 bronze badges

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

2 Comments

Shyamal Parikh Over a year ago

How can I have this predicate function as a global predicate? Custom filter?

bakkal Over a year ago

@shyamalparikh I think the most natural solution is a custom filter defined in the app module. Otherwise maybe put it into your UserService service? e.g. as UserService.getUsersWithoutRankId(rankId) and use that directly instead of filtering it in the scope. Because putting a filter and/or its predicate function into $scope or $rootScope isn't really a good idea. I think a good controller is a thin controller that delegates other things to a service e.g. I hope this helps!

Dawid Pawłowski · Accepted Answer · 2015-10-16 07:29:01Z

1

You can create custom filter to filter item manually:

.filter('customFilter', function() {
  return function(array, numberToSkip) {
    var result = [];

    for (i = 0; i < array.length; i++) {
      var arrayItemContainsId = false;

      for (j = 0; j < array[i].ranks.length; j++) {
        if (array[i].ranks[j].id === numberToSkip) {
          arrayItemContainsId = true;
        }
      }

      if (arrayItemContainsId == false) {
        result.push(array[i]);
      }
    }

    return result;
  };
});

and use this like this:

<ul>
   <li ng-repeat="user in users | customFilter: 15"> 
      {{ user }}
   </li>
</ul>

answered Oct 16, 2015 at 7:29

Dawid Pawłowski

1625 bronze badges

2 Comments

Shyamal Parikh Over a year ago

Well that is an alternative but angularjs has an option of NOT filtering then why not use it? Check this: docs.angularjs.org/api/ng/filter/filter Also check stackoverflow.com/questions/22666366/…

bakkal Over a year ago

@shyamalparikh Most likely because you are testing for a container having a given element, as opposed to being equal / not equal to something, and what you're doing is making ng test user.ranks (which is a list) against an object ({id: 15}), which isn't what you want. A custom filter like Dawid, or a custom predicate function like in my answer is way to implement this

sam100rav · Accepted Answer · 2015-10-16 07:09:40Z

-1

You have implemented the not filter slightly wrong. Use this instead

<li ng-repeat="user in users | filter: !{ranks: {id:15}} : true">

answered Oct 16, 2015 at 7:09

sam100rav

3,7934 gold badges30 silver badges45 bronze badges

Collectives™ on Stack Overflow

Angularjs: How to apply NOT filter?

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related