example - AngularJS: cómo estructurar un filtro personalizado con ng-repeat para devolver elementos condicionalmente

ng-repeat filter

Question

Tengo una repetición ng que imprime elementos de la lista. Quiero escribir un filtro personalizado para que se imprima el elemento de la lista, solo si una condición es verdadera.

Parece que tengo la estructura incorrecta ya que parece que las variables no se pasan al filtro.

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 1

Los filtros no funcionan en elementos individuales de la matriz, sino que transforman toda la matriz en otra matriz.

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

Ver este plnkr

** siempre inspeccione los argumentos a una función. No siempre es obvio cuáles son los valores. *

ver la guía de filtros

Answer 2

Para los amantes de CoffeeScript:

userApp.filter ''matchAccessLevel'', ->
  (items, userAccessLevel) ->
    item for item in items when userAccessLevel >= item.minAccess

Answer 3

Puede usar Array.filter para una solución más concisa:

app.filter(''matchAccessLevel'', function() {
    return function( items, userAccessLevel ) {
      return items.filter(function(element){
        return userAccessLevel >= element.minAccess;
      });
    }
});

Compruebe en Plunker