AngularJS – 如何构造一个自定义过滤器ng-repeat有条件地返回项

发布时间：2020-12-17 09:02:03 所属栏目：安全来源：网络整理

导读：我有一个ng-repeat打印列表项。我想写一个自定义过滤器，以便列表项将打印，只有条件为真。我似乎有错误的结构，因为它似乎变量没有传递到过滤器。 index.php div ng-show="userDetails.username" class="nav" pMenu/p li ng-repeat="menuItem in menu | ma

我有一个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;
        }
    }
});

过滤器不适用于数组中的单个项目，它们将整个数组转换为另一个数组。

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!