AngularJS - 如何使用ng-repeat构造自定义过滤器以有条件地返回物品

我有一个可以打印列表项的ng-repeat。我想编写一个自定义过滤器，以便只有在条件为真时才会打印列表项。AngularJS - 如何使用ng-repeat构造自定义过滤器以有条件地返回物品

我似乎有错误的结构，因为它似乎变量没有通过过滤器。

的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; 
     } 
    } 
});

来源

2013-03-04 Fisu

124

过滤器不会对数组中的各个项目工作，他们改变了整个阵列到另一个阵列。

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

看到这个plnkr

**总是检查参数的函数。它并不总是显而易见的什么值*

看到filters guide

来源

2013-03-04 08:18:27

非常感谢您的解释。看来我明白过滤器如何正确工作。这使得它更清晰。 – Fisu 2013-03-04 09:20:32

我得不到正确的是争论的事情。有没有关于过滤器如何提供参数/参数的任何文档？ – mrzmyr 2013-06-09 22:50:07

总是检查函数的参数。它并不总是很明显的值是什么 – MurWade 2014-09-30 01:00:39

-1

对于CoffeeScript的爱好者：

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

来源

2015-10-01 13:11:12 fracz

可以使用Array.filter一个更简洁的解决方案：

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

Check on Plunker

来源

2016-03-15 21:27:14

AngularJS - 如何使用ng-repeat构造自定义过滤器以有条件地返回物品

回答

相关问题