json - AngularJS filtering ng-repeat by array -
so have json data of hvac businesses , want filter them certification array using html checkbox. following code simple version of i'm working |filter
, ng-model
removed
angular.module("list",[]) .controller("listcontroller",[listctrlfun]) function listctrlfun(){ this.businesses = [ { "name": "hotcold", "certifications": ["residential","installation"] },{ "name": "megacorp", "certifications": ["commercial","installation"] }]; }
<div ng-app="list" ng-controller="listcontroller vm"> <div> <label> <input type="checkbox" /> residential </label> <label> <input type="checkbox" /> commercial </label> <label> <input type="checkbox" /> installation </label> </div> <div ng-repeat="business in vm.businesses"> <p>{{business.name}}</p> </div> </div>
goal when checks installation both businesses show , if check commercial , install 1 show up. not sure how bind values checkboxes can crossed referenced against data. have tried this...
this.types = {residential: true, commercial: true, installation: true}
here , can values change when bind them checkboxes. still unsure how cross reference true/false value data
use ng-model on checkboxes, set true if checked , false if not. can pass function filter returns true if 1 of business' certification checked:
$scope.filterby = function () { return function(e) { return e.certifications.some(v => $scope.options[v]); } } $scope.options = { installation: true, residential: true, commercial: true }
with html
<div> <label> <input type="checkbox" ng-model="options.residential"/> residential </label> <label> <input type="checkbox" ng-model="options.commercial" /> commercial </label> <label> <input type="checkbox" ng-model="options.installation"/> installation </label> </div> <div ng-repeat="business in businesses | filter:filterby(business)"> <p>{{business.name}}</p> </div>
Comments
Post a Comment