Fisu Fisu - 5 months ago 34
AngularJS Question

AngularJS - How to structure a custom filter with ng-repeat to return items conditionally

I have an ng-repeat that prints list items. I want to write a custom filter so that the list item will print, only if a condition is true.

I seem to have the structure wrong as it seems the variables are not getting passed through to the filter.

index.php

<div ng-show="userDetails.username" class="nav">
<p>Menu</p>
<li ng-repeat="menuItem in menu | matchAccessLevel:$rootScope.userDetails.accessLevel:menuItem.minAccess | orderBy:'position' ">
<a ng-href="/angular-app/app/{{menuItem.id}}">{{menuItem.name}}</a>
</li>
</div>


app.js

userApp.filter('matchAccessLevel', function() {
return function( item, userAccessLevel, minAccessLevel ) {
if( userAccessLevel >= minAccessLevel ) {
return item;
}
}
});

Answer

Filters don't work on individual items in the array, they transform the entire array into another array.

userApp.filter('matchAccessLevel', function() {
  return function( items, userAccessLevel) {
    var filtered = [];
    angular.forEach(items, function(item) {
      if(userAccessLevel >= item.minAccess) {
        filtered.push(item);
      }
    });
    return filtered;
  };
});

See this plnkr

*always inspect the arguments to a function. It's not always obvious what the values are.

see filters guide