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>
最佳答案
您可以使用 ng-show in li
item 检查两个条件(未读和 highImportance)来实现这样的功能。
<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;
};
});
然后你必须在 Controller 方法中调用过滤器。
$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>
请务必在 Controller 定义中声明 $filter
并初始化列表 shownNotifications
。
你可以看看更新后的jsfiddle here 。
请随意优化 - 根据您的意愿更改我的示例实现。
关于javascript - AngularJS Ng-Repeat - 多个自定义过滤器通过 JSON 对象属性过滤项目,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47556336/