AngularJS Ng-Repeat - JSONオブジェクトのプロパティで項目をフィルタリングする複数のカスタムフィルタ

Question

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

オブジェクトのJSONプロパティが選択したオプションと一致する場合、複数のフィルタでng-repeatリスト内のアイテムをフィルタリングしようとしています。

「未読」フィルタが選択されている場合、各jsonオブジェクトの「未読」プロパティがtrueと等しい項目のみが表示され、同様に重要度の高いフィルタが表示されます。

また、この2つのフィルタを組み合わせることで、フィルタが両方選択されているときに、未読と重要度の高いプロパティが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

次の2つの条件（未読と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を見ることができます。 気軽に最適化してください - サンプルの実装を望みどおりに変更してください。