ChasingTimmy ChasingTimmy - 1 month ago 11
AngularJS Question

AngularJS filtering ng-repeat by array

So i have JSON data of HVAC businesses and I want to filter them by their certification array using an HTML checkbox. The following code is a simple version of what i'm working with

|filter
and
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 as 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>





The goal is so that when someone checks Installation both businesses show up and if they check Commercial and Install only that one will show up. I am not sure how to bind the values from the checkboxes so that they can be crossed referenced against the data. I have tried something like this...
this.types = {Residential: true, Commercial: true, Installation: true}
here and I can get the values to change when I bind them to the checkboxes. Still i am unsure how to cross reference the true/false value with the data

Answer Source

Use ng-model on the checkboxes, this will set to true if checked and false if not. Then you can simply pass a function to filter that returns true if one of the business' certification is actually checked:

$scope.filterBy = function () {
  return function(e) {
    return e.certifications.some(v => $scope.options[v]);
  }
}

$scope.options = {
  Installation: true,
  Residential: true,
  Commercial: true
}

With this 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>

Here's a plunkr