AngularJS复选框过滤器 [英] AngularJS checkbox filter
问题描述
我想过滤结果。
有一个葡萄酒列表，我的愿望是当没有复选框被选中时，整个葡萄酒列表显示。
There is a list of wines, my wish is when no checkbox is checked, the entire list of wine is displayed.
- 当多个复选框被选中时，相关类别
- 检查相关类别的显示
我是AngularJS的新手，我尝试ng-model wihout成功，这里是代码没有与该函数关联的ng-model：
I'm a newbie to AngularJS, I tried with ng-model wihout success, here is the code without ng-model associated to the function:
<html ng-app="exampleApp">
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.10/angular.min.js"></script>
<script>
angular.module("exampleApp", [])
.controller("defaultCtrl", function ($scope) {
$scope.wines = [
{ name: "Wine A", category: "red" },
{ name: "Wine B", category: "red" },
{ name: "wine C", category: "white" },
{ name: "Wine D", category: "red" },
{ name: "Wine E", category: "red" },
{ name: "wine F", category: "white" },
{ name: "wine G", category: "champagne"},
{ name: "wine H", category: "champagne" }
];
$scope.selectItems = function (item) {
return item.category == "red";
};
$scope.selectItems = function (item) {
return item.category == "white";
};
$scope.selectItems = function (item) {
return item.category == "champagne";
};
});
</script>
</head>
<body ng-controller="defaultCtrl">
<h4>red: <input type="checkbox"></h4>
<h4>white: <input type="checkbox"></h4>
<h4>champagne: <input type="checkbox"></h4>
<div ng-repeat="w in wines | filter:selectItems">
{{w.name}}
{{w.category}}
</div>
</body>
</html>
如何使用ng-model或ng-change将函数关联到每个复选框按钮，实时过滤模型
How to use ng-model or ng-change to associate a function to each checkbox button to have a real time filtering model??
推荐答案
有几种实现可能。这里有一个：
There are several implementations possible. Here's one:
-
有一个
$ scope.filter = {}对象保持每个过滤器的状态。例如。{red：true，white：false ...}
Have a
$scope.filter = {}object to hold the state of each filter. E.g.{red: true, white: false...}.
属性使用 ng-model 。例如： input type =checkboxng-model =filter ['red']/> 。
有一个函数（例如 $ scope.filterByCategory（wine））决定是否显示一个葡萄酒（基于 $ scope.filter object）。
Have a function (e.g. $scope.filterByCategory(wine)) that decides if a wine should be displayed or not (based on the $scope.filter object).
使用该函数根据项目过滤项目。例如。 < div ng-repeat =wine in wines | filter：filterByCategory>
Use that function to filter the items based on their category. E.g. <div ng-repeat="wine in wines | filter:filterByCategory">
filterByCategory 函数可以这样实现：
function filterByCategory(wine) {
// Display the wine if
var displayWine =
// the wine's category checkbox is checked (`filter[category]` is true)
$scope.filter[wine.category] || // or
// no checkbox is checked (all `filter[...]` are false)
noFilter($scope.filter);
return displayWine;
};
其中 noFilter（）检查是否有任何过滤器激活（如果没有过滤器，则返回 true ）：
where noFilter() is a function that checks if there is any filter activated (and returns true if there is none):
function noFilter(filterObj) {
return Object.
keys(filterObj).
every(function (key) { return !filterObj[key]; });
}
简短演示 。
See, also, this short demo.
UPDATE ：
我创建了一个修改版本， （不只是按类别过滤）。
基本上，它动态检测可用属性（基于第一个 wine 元素），添加控件复选框），用于根据每个属性应用过滤器，并具有以下自定义过滤器功能：
I created a modified version, which supports multiple filters (not just filtering by category).
Basically, it dynamically detects the available properties (based on the first wine element), adds controls (groups of check-boxes) for applying filters based on each property and features a custom filter function that:
- 过滤每个
葡萄酒 - 如果某个属性没有应用过滤器（即未选中复选框），则会被忽略。
- 如果某个属性具有复选框，则用于过滤
wine项（见上文）。 - 有使用AND（即所有属性必须匹配）或OR（至少一个属性必须匹配）应用多个过滤器的代码。
- Filters each
wineitem, based on every property. - If a property has no filter applied (i.e. no check-box checked), it is ignored.
- If a property has check-boxes checked, it is used for filtering out
wineitems (see above). - There is code for applying multiple filters using AND (i.e. all properties must match) or OR (at least one property must match).
< hr>
另请参阅 更新的演示 。
See, also, this updated demo.
这篇关于AngularJS复选框过滤器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
