How to use checkbox to filter results using Angular?

Question

I am trying to apply a filter using checkboxes.

Checkboxes are correct:

<div data-ng-repeat="cust in customers"> <input type="checkbox" data-ng-model="search.city" data-ng-true-value="{{ cust.city }}" data-ng-false-value=""/> {{ cust.city }} </div> 

but when checking any flag nothing happens:

 <table> <!-- table heading goes here --> <tbody> <tr data-ng-repeat="customer in customers | filter : search"> <td > {{ customer.firstName }} </td> <td > {{ customer.lastName }} </td> <td > {{ customer.address }} </td> <td > {{ customer.city }} </td> </tr> </tbody> </table> 

The table shows all clients.

I want to achieve: when one or more checkboxes are checked, the table should show only those rows that match the condition of the checked checkboxes.

What do I need to do to make this work?

Answer 1

It looks like you are providing a list of customers, and when one or more is selected, display a table of customers who are in the same city as the selected customers.

To do this, you will need a special filter:

 // Define our filter app.filter('selectedCustomerCities', function($filter) { return function(customers) { var i, len; // get customers that have been checked var checkedCustomers = $filter('filter')(customers, {checked: true}); // Add in a check to see if any customers were selected. If none, return // them all without filters if(checkedCustomers.length == 0) { return customers; } // get all the unique cities that come from these checked customers var cities = {}; for(i = 0, len = checkedCustomers.length; i < len; ++i) { // if this checked customers cities isn't already in the cities object // add it if(!cities.hasOwnProperty(checkedCustomers[i].city)) { cities[checkedCustomers[i].city] = true; } } // Now that we have the cities that come from the checked customers, we can //get all customers from those cities and return them var ret = []; for(i = 0, len = customers.length; i < len; ++i) { // If this customer city exists in the cities object, add it to the // return array if(cities[customers[i].city]) { ret.push(customers[i]); } } // we have our result! return ret; }; }); 

Then your markup will change to the following:

 <div data-ng-repeat="customer in customers"> <!-- record that this customer has been selected --> <input type="checkbox" ng-checked="customer.checked" ng-model="customer.checked" /> {{ customer.city }} </div> <table> <!-- table heading goes here --> <tbody> <!-- use our custom filter to only display customers from the cities selected --> <tr data-ng-repeat="customer in customers | selectedCustomerCities"> <td>{{ customer.firstName }}</td> <td>{{ customer.lastName }}</td> <td>{{ customer.address }}</td> <td>{{ customer.city }}</td> </tr> </tbody> </table> 

You can see how it works on this Plunker: http://plnkr.co/edit/GlHRLKECR4jeBS7Vf7TX?p=preview

Answer 2

You can pass a function to an AngularJS filter. For instance:

Set the input tag as:

 <input type="checkbox" ng-model="search[cust.city]" /> {{ cust.city }} 

Set your filter as:

 <tr data-ng-repeat="customer in customers | filter:searchBy() "> 

In your controller:

 function ctrl($scope) { $scope.customers = [...]; $scope.search = {}; $scope.searchBy = function () { return function (customer) { if ( $scope.search[customer.city] === true ) { return true; } } }; } 

If you want to show all clients at startup, just initialize $scope.search using city from the customers array.

Here is an example of Plunker .