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?
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.