Sté*_*ane 18 checkbox angularjs angularjs-directive angular-ngmodel angular-filters
我想过滤结果.
有一个葡萄酒列表,我的愿望是当没有选中复选框时,会显示整个葡萄酒列表.
我是AngularJS的新手,我尝试使用ng-model并没有成功,这里是没有与该函数关联的ng-model的代码:
<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将函数关联到每个复选框按钮以获得实时过滤模型？
gka*_*pak 46
有几种实现方式可行.这是一个:
有一个$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) {
// 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()是一个函数,检查是否有任何过滤器被激活(true如果没有则返回):
function noFilter(filterObj) {
return Object.
keys(filterObj).
every(function (key) { return !filterObj[key]; });
}
另见这个简短的演示.
更新:
我创建了一个修改版本,它支持多个过滤器(不只是按类别过滤).
基本上,它动态检测可用属性(基于第一个wine元素),添加控件(复选框组)以根据每个属性应用过滤器,并具有以下自定义过滤器功能:
wine根据每个属性过滤每个项目.wine项目(参见上文).另请参阅此更新的演示.
| 归档时间： |
|
| 查看次数： |
34172 次 |
| 最近记录： |