Easy way
I would Set different models for both check boxes and add filter like:
<body data-ng-controller="TestController">
<table id="hotels">
<tr>
<th>Hotel Name</th>
<th>Star Rating</th>
<th>Hotel type</th>
<th>Hotel Price</th>
</tr>
<tr data-ng-repeat="hotel in hotels | filter:search.type1 | filter:search.type2">
<td>{{hotel.name}}</td>
<td>{{hotel.star}}</td>
<td>{{hotel.type}}</td>
<td>{{hotel.price}}</td>
</tr>
</table>
<br/>
<h4>Filters</h4>
<input type="checkbox" data-ng-model='search.type1' data-ng-true-value='luxury' data-ng-false-value='' /> Luxury
<input type="checkbox" data-ng-model='search.type2' data-ng-true-value='double suite' data-ng-false-value='' /> Double suite
</body>
Demo Plunker
Custom filter
We can bind the checkboxes to one object like:
$scope.types = {luxury: false, double_suite:false};
and after create custom filter like:
iApp.filter('myfilter', function() {
return function( items, types) {
var filtered = [];
angular.forEach(items, function(item) {
if(types.luxury == false && types.double_suite == false) {
filtered.push(item);
}
else if(types.luxury == true && types.double_suite == false && item.type == 'luxury'){
filtered.push(item);
}
else if(types.double_suite == true && types.luxury == false && item.type == 'double suite'){
filtered.push(item);
}
});
return filtered;
};
});
So our HTML now seems simple:
<body data-ng-controller="TestController">
<table id="hotels">
<tr>
<th>Hotel Name</th>
<th>Star Rating</th>
<th>Hotel type</th>
<th>Hotel Price</th>
</tr>
<tr data-ng-repeat="hotel in hotels | myfilter:types">
<td>{{hotel.name}}</td>
<td>{{hotel.star}}</td>
<td>{{hotel.type}}</td>
<td>{{hotel.price}}</td>
</tr>
</table>
<br/>
<h4>Filters</h4>
<input type="checkbox" data-ng-model='types.luxury' /> Luxury
<input type="checkbox" data-ng-model='types.double_suite' /> Double suite
<pre>{{types|json}}</pre>
</body>
Demo 2 Plunker
