AngularJS 复选框过滤器 [英] AngularJS checkbox filter
问题描述
我想过滤结果.
有一个葡萄酒列表,我的愿望是当没有选中复选框时,显示整个葡萄酒列表.
- 当仅选中 1 个复选框时,会显示相关类别
- 当检查多个复选框时,相关类别显示
我是 AngularJS 的新手,我尝试使用 ng-model 没有成功,这里是没有与函数关联的 ng-model 的代码:
<头><title></title><script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.10/angular.min.js"></script><脚本>angular.module("exampleApp", []).controller("defaultCtrl", function ($scope) {$scope.wines = [{名称:酒A",类别:红色"},{名称:酒B",类别:红色"},{名称:葡萄酒C",类别:白"},{名称:酒D",类别:红色"},{名称:酒E",类别:红色"},{名称:酒F",类别:白"},{名称:葡萄酒G",类别:香槟"},{名称:葡萄酒H",类别:香槟"}];$scope.selectItems = 函数(项目){返回 item.category == "red";};$scope.selectItems = 函数(项目){返回 item.category == "white";};$scope.selectItems = 函数(项目){返回 item.category == "香槟";};});头部><body ng-controller="defaultCtrl"><h4>红色:<input type="checkbox"></h4><h4>白色:<input type="checkbox"></h4><h4>香槟:<input type="checkbox"></h4><div ng-repeat="w in wines | filter:selectItems">{{w.name}}{{w.category}}
</html>
如何使用 ng-model 或 ng-change 将一个函数关联到每个复选框按钮上,从而有一个实时过滤模型??
有几种可能的实现方式.这是一个:
有一个
$scope.filter = {}
对象来保存每个过滤器的状态.例如.{red: true, white: false...}
.使用
ng-model
将每个复选框与相应的属性相关联.例如:input type="checkbox" ng-model="filter['red']"/>
.有一个函数(例如
$scope.filterByCategory(wine)
)来决定是否应该显示葡萄酒(基于$scope.filter
)> 对象).使用该函数根据类别过滤项目.例如.
<div ng-repeat="wine in wines | filter:filterByCategory">
<小时>
filterByCategory
函数可以这样实现:
function filterByCategory(wine) {//如果显示酒var displayWine =//葡萄酒的类别复选框被选中(`filter[category]` 为真)$scope.filter[wine.category] ||//或者//没有选中复选框(所有 `filter[...]` 都是假的)noFilter($scope.filter);返回显示酒;};
其中 noFilter()
是一个函数,用于检查是否有任何过滤器被激活(如果没有则返回 true
):
function noFilter(filterObj) {返回对象.键(过滤器对象).每个(函数(键){返回!filterObj[键];});}
<小时>
另请参阅此简短演示..><小时>
更新:
我创建了一个修改版本,它支持多个过滤器(不仅仅是按类别过滤).
基本上,它动态检测可用属性(基于第一个 wine
元素),添加控件(复选框组)以根据每个属性应用过滤器,并具有自定义过滤器功能:>
- 根据每个属性过滤每个
wine
项目. - 如果一个属性没有应用过滤器(即没有选中复选框),它会被忽略.
- 如果属性已选中复选框,则用于过滤
wine
项(见上文). - 有一些代码可以使用 AND(即所有属性必须匹配)或 OR(至少一个属性必须匹配)来应用多个过滤器.
<小时>
另请参阅此更新演示..>
I would like to filter the results.
There is a list of wines, my wish is when no checkbox is checked, the entire list of wine is displayed.
- when only 1 checkbox is checked is displayed the related category
- when more than one checkbox are checked the related categories are displayed
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>
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:
Have a
$scope.filter = {}
object to hold the state of each filter. E.g.{red: true, white: false...}
.Associate each checkbox with the corresponding property using
ng-model
. E.g.:input type="checkbox" ng-model="filter['red']" />
.Have a function (e.g.
$scope.filterByCategory(wine)
) that decides if a wine should be displayed or not (based on the$scope.filter
object).Use that function to filter the items based on their category. E.g.
<div ng-repeat="wine in wines | filter:filterByCategory">
The filterByCategory
function could be implemented like this:
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;
};
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:
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:
- Filters each
wine
item, 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
wine
items (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).
See, also, this updated demo.
这篇关于AngularJS 复选框过滤器的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!