Question

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

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

因此，当选择“未读”过滤器时，项目将仅显示在每个json对象的“未读”属性等于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

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

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

});

然后你必须在控制器方法中调用filter。

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

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

1 个答案: