作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我想过滤结果。
有一个酒单,我的愿望是当没有选中复选框时,显示整个酒单。
<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>
最佳答案
有几种可能的实现方式。这是一个:
$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;
};
noFilter()
是一个检查是否有任何过滤器被激活的函数(如果没有则返回
true
):
function noFilter(filterObj) {
return Object.
keys(filterObj).
every(function (key) { return !filterObj[key]; });
}
wine
元素),添加控件(复选框组)以根据每个属性应用过滤器,并具有自定义过滤器功能:
wine
项目,基于每个属性。 wine
项目(见上文)。 关于AngularJS 复选框过滤器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23983322/
我是一名优秀的程序员,十分优秀!