example - AngularJS: cómo estructurar un filtro personalizado con ng-repeat para devolver elementos condicionalmente
ng-repeat filter (3)
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;
}
}
});
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
Para los amantes de CoffeeScript:
userApp.filter ''matchAccessLevel'', ->
(items, userAccessLevel) ->
item for item in items when userAccessLevel >= item.minAccess
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;
});
}
});