AngularJS checkbox filter -
i filter results.
there list of wines, wish when no checkbox checked, entire list of wine displayed.
- when 1 checkbox checked displayed related category
- when more 1 checkbox checked related categories displayed
i'm newbie angularjs, tried ng-model wihout success, here code without ng-model associated 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 use ng-model or ng-change associate function each checkbox button have real time filtering model??
there several implementations possible. here's one:
have
$scope.filter = {}object hold state of each filter. e.g.{red: true, white: false...}.associate each checkbox corresponding property using
ng-model. e.g.:input type="checkbox" ng-model="filter['red']" />.have function (e.g.
$scope.filterbycategory(wine)) decides if wine should displayed or not (based on$scope.filterobject).use function filter items based on category. e.g.
<div ng-repeat="wine in wines | filter:filterbycategory">
the filterbycategory function implemented this:
function filterbycategory(wine) { // display wine if var displaywine = // wine's category checkbox checked (`filter[category]` true) $scope.filter[wine.category] || // or // no checkbox checked (all `filter[...]` false) nofilter($scope.filter); return displaywine; }; where nofilter() function checks if there filter activated (and returns true if there none):
function nofilter(filterobj) { return object. keys(filterobj). every(function (key) { return !filterobj[key]; }); } see, also, short demo.
update:
i created modified version, supports multiple filters (not filtering category).
basically, dynamically detects available properties (based on first wine element), adds controls (groups of check-boxes) applying filters based on each property , features custom filter function that:
- filters each
wineitem, based on every property. - if property has no filter applied (i.e. no check-box checked), ignored.
- if property has check-boxes checked, used filtering out
wineitems (see above). - there code applying multiple filters using , (i.e. properties must match) or or (at least 1 property must match).
see, also, updated demo.
Comments
Post a Comment