AngularJS Ng-Repeat - 通过 JSON 对象属性过滤项目的多个自定义过滤器

Question

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

如果对象的 JSON 属性与所选选项匹配，我正在尝试通过多个过滤器过滤 ng-repeat 列表中的项目。

So when the 'Unread' filter is selected, items will only be displayed where the 'unread' property of each json object is equal to true, and similarly with the high importance filter.

我还希望能够组合这两个过滤器，以便在同时选择过滤器时列表只显示未读和高重要性属性都等于 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

您可以在 li 项目中使用 ng-show 来实现这样的功能，检查两个条件（未读和高重要性）。

<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。 随意优化 - 根据需要更改我的示例实现。