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.
- 当只有1复选框被选中,显示相关的类别
- 当一个以上的复选框选中的相关类别显示
我是一个新手,以AngularJS,我试着用NG-模型wihout成功,这里是code,无关联的功能NG-模式:
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-模型或NG-变化的函数每个复选框按钮关联有一个实时过滤模型??
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 = {}
对象来保存每个过滤器的状态。例如。{红:真白:假的... ...}
Have a
$scope.filter = {}
object to hold the state of each filter. E.g.{red: true, white: false...}
.
使用 NG-模型
的相应属性关联的每个复选框。例如:输入类型=复选框NG模型=过滤器['红']/方式&gt;
Associate each checkbox with the corresponding property using ng-model
. E.g.: input type="checkbox" ng-model="filter['red']" />
.
有一个函数(如 $ scope.filterByCategory(酒)
),它决定一个葡萄酒应显示或不(根据 $ scope.filter
对象)。
Have a function (e.g. $scope.filterByCategory(wine)
) that decides if a wine should be displayed or not (based on the $scope.filter
object).
使用该功能来筛选根据其类别的项目。例如。 &LT; DIV NG重复=W的葡萄酒|过滤器:filterByCategory&GT;
Use that function to filter the items based on their category. E.g. <div ng-repeat="w in wines | filter:filterByCategory">
的 filterByCategory
功能,可以这样进行:
The filterByCategory
function could be implemented like this:
$scope.filterByCategory = function (wine) {
// Display the wine if
return
// 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);
};
其中, NOFILTER
是检查是否有激活的任何过滤(函数,返回真正
如果没有):
where noFilter
is a function that checks if there is any filter activated (and returns true
if there is none):
function noFilter(filterObj) {
for (var key in filterObj) {
if (filterObj[key]) {
// There is at least one checkbox checked
return false;
}
}
// No checkbox was found to be checked
return true;
}
又见这个 短演示
See, also, this short demo.
更新
我创建了一个修改版本,支持多种滤镜(不只是按类别过滤)。结果
基本上,它可动态检测可用属性(基于第一葡萄酒
元素),添加控件(中的复选框组),用于将基于每个属性过滤器,并配有定制过滤功能是:
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:
- 过滤器每个
葡萄酒
项目的基础上,每个属性。 - 如果某个属性没有应用的过滤器(即没有复选框选中),它将被忽略。
- 如果一个酒店入住箱子检查,它是用于过滤掉
葡萄酒
项目(见上文)。 - 有code使用AND(即所有属性必须匹配)或OR(至少一个属性muust匹配)应用多个过滤器。
- 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 muust match).
又见这个 更新演示
See, also, this updated demo.
这篇关于AngularJS复选框过滤器的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!