program tip

AngularJS-조건부로 항목을 반환하기 위해 ng-repeat로 사용자 지정 필터를 구성하는 방법

radiobox 2020. 12. 11. 08:00
반응형

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

필터는 배열의 개별 항목에서 작동하지 않으며 전체 배열을 다른 배열로 변환합니다.

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 보기

** 항상 함수에 대한 인수를 검사하십시오. 값이 무엇인지 항상 분명하지는 않습니다. *

필터 가이드 참조


보다 간결한 솔루션을 위해 Array.filter를 사용할 수 있습니다.

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

Plunker 확인


CoffeeScript 애호가 :

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

참고 URL : https://stackoverflow.com/questions/15196161/angularjs-how-to-structure-a-custom-filter-with-ng-repeat-to-return-items-cond

반응형