web-dev-qa-db-ja.com

AngularJS-ng-repeatを使用して条件付きでアイテムを返すカスタムフィルターを構成する方法

リスト項目を印刷する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;
        }
    }
});
angularjsng-repeatangular-filters
58
Fisu

フィルターは配列内の個々のアイテムに対して機能せず、配列全体を別の配列に変換します。

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

**関数の引数を常に検査します。値が何であるかは必ずしも明らかではありません。*

フィルタガイド を参照してください

124
Liviu T.

より簡潔なソリューションには、Array.filterを使用できます。

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

Plunkerで確認

6
Nathan Boolean Trujillo