![SelectItems]( "SelectItems")
根据每个属性过滤每个 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 categorywhen more than one checkbox are checked the related categories are displayedI'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 复选框过滤器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 上岸，阿里云！ 09-02 02:38