AngularJS Ng-Repeat - JSON 개체 속성별로 항목을 필터링하는 여러 사용자 지정 필터

Question

JSFiddle : http://jsfiddle.net/ADukg/16368/.

개체의 JSON 속성이 선택한 옵션과 일치하면 ng-repeat 목록의 항목을 여러 필터로 필터링하려고합니다.

'읽지 않음'필터를 선택하면 각 json 개체의 '읽지 않음'속성이 true이고 중요도가 높은 필터와 마찬가지로 항목 만 표시됩니다.

또한이 두 필터를 결합 할 수 있기 때문에 목록을 모두 읽었을 때와 중요도가 높은 속성이 모두 표시 될 때만 필터가 선택되었을 때 true로 표시됩니다.

필자는 필터 체크 박스 모델을 사용했던 위의 JSFiddle에서 기본 설정을 얻었지만 이러한 필터를 구현하는 메소드에서 잠시 동안 찾고 있었고 어떻게 나는이 시나리오에 필요한 것을 할 것이다.

HTML :

<div> 
    <label for="filterByAllCheckbox">Filter by All </label> 
    <input ng-model="filters.all" ng-change="filterByAll()" type="checkbox" id="filterByAllCheckbox" ng-disabled="filters.all"> 
</div> 

<div> 
    <label for="filterByUnreadCheckbox">Filter by Unread </label> 
    <input ng-model="filters.unread" ng-change="manageFilters()" type="checkbox" id="filterByUnreadCheckbox"> 
</div> 

<div> 
    <label for="filterByHighImportanceCheckbox">Filter by High Importance </label> 
    <input ng-model="filters.highImportance" ng-change="manageFilters()" type="checkbox" id="filterByHighImportanceCheckbox"> 
</div> 

<br> 

<ul> 
    <b>NOTIFICATIONS</b> 
    <li ng-repeat="notification in notifications"> 
    {{notification.title}} 
    </li> 
</ul> 

Answer 1

당신은 두 가지 조건 (읽지 및 highImportance)를 확인 li 항목에서 NG-쇼를 사용하여 이러한 기능을 구현할 수 있습니다.

<li ng-repeat="notification in notifications" 
    ng-show="(filters.all) 
    || (filters.unread && !notification.read && filters.highImportance && notification.importance == 'High') 
    || (!filters.unread && notification.read && filters.highImportance && notification.importance == 'High') 
    || (filters.unread && !notification.read && !filters.highImportance && notification.importance != 'High') 
    || (!filters.unread && notification.read && !filters.highImportance && notification.importance != 'High')"> 
    {{notification.title}} 
</li> 

나는 이것이 당신이 설명하는 것을 달성하는 가장 좋은 방법 일지 의심 스럽다.

업데이트 됨. 사용자 지정 필터 구현.

var myApp = angular.module('myApp',[]).filter('notificationFilter', function() { 

    return function (array, all, unread, highImportance) { 

     var matches = []; 
     for (var i = 0; i < array.length; i++) { 
      if (all 
       || (!unread && highImportance && array[i].importance == 'High') 
       || (unread && !array[i].read && !highImportance) 
       || (unread && !array[i].read && highImportance && array[i].importance == 'High')) { 
      matches.push(array[i]); 
     } 
     return matches; 
    }; 

}); 

그러면 컨트롤러 메서드에서 필터를 호출해야합니다.

$scope.manageFilters = function() { 
    if ($scope.filters.unread == true || $scope.filters.highImportance == true) { 
     $scope.filters.all = false; 
    } else { 
     $scope.filters.all = true; 
    } 
    $scope.shownNotifications = $filter('notificationFilter')($scope.notifications, $scope.filters.all, $scope.filters.unread, $scope.filters.highImportance); 
} 

그리고

$scope.filterByAll = function() { 
    if ($scope.filters.all == true) { 
     $scope.filters.unread = false; 
     $scope.filters.highImportance = false; 
     $scope.shownNotifications = $filter('notificationFilter')($scope.notifications, $scope.filters.all, $scope.filters.unread, $scope.filters.highImportance); 
    } 
} 

물론 변화 HTML의

:

<li ng-repeat="notification in shownNotifications"> 
    {{notification.title}} 
</li> 

하는 컨트롤러 정의에 $filter를 선언해야합니다 및 목록 shownNotifications를 초기화 할 수 있습니다. 업데이트 된 jsfiddle here을 살펴볼 수 있습니다. 자유롭게 기분 전환하십시오 - 샘플 구현을 원하는대로 변경할 수 있습니다.