How to use checkbox to filter results with Angular?

Question

I am trying to apply a filter using checkboxes.

The checkboxes are shown correctly:

<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 checkbox, 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 the customers.

What I want to achieve is: when one or more checkboxes are checked, the table has to show only these rows which match the condition of the checked checkboxes.

What do I have to do to get this working?

Answer 1

You can pass a function to the AngularJS filter. For example:

Set you 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 wish to show all customer at startup, simply initialise $scope.search with city from the customers array.

Here is a sample Plunker.