AngularJS - Comment structurer un filtre personnalisé avec ng-repeat pour renvoyer des éléments de manière conditionnelle

Question

J'ai un ng-repeat qui imprime les éléments de la liste. Je souhaite écrire un filtre personnalisé pour que l'élément de la liste s'imprime, uniquement si une condition est vraie.

Il me semble que la structure est erronée car il semble que les variables ne sont pas transmises au filtre.

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="http://stackoverflow.com/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 1

Les filtres ne fonctionnent pas sur des éléments individuels du tableau, ils transforment tout le tableau en un autre tableau.

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

Voir ce plnkr

* toujours inspecter les arguments d'une fonction. Les valeurs ne sont pas toujours évidentes.

voir le guide des filtres