Filtering by multiple checkboxes in AngularJS - angularjs

Question

first time I've posted a question on here, so apologies in advance if I breach any Stack Overflow etiquette! :-)
I'm having a go at some AngularJS for the first time in order to create a proof-of-concept for my boss. It's a basic car hire listings app, with a list of results in the main column, and a filter panel down the side. I've managed to pull in the results from a JSON object, and apply a basic filter, as below;
<article data-ng-repeat="result in results | filter:search" class="result">
<h3>{{result.carType.name}}, £{{result.price.value}}</h3>
<img class="car-type" alt="{{result.carType.name}}" src="{{result.carType.image}}" />
<ul class="result-features">
<li>{{result.carDetails.hireDuration}} day hire</li>
<li data-ng-show="result.carDetails.airCon">Air conditioning</li>
<li data-ng-show="result.carDetails.unlimitedMileage">Unlimited Mileage</li>
<li data-ng-show="result.carDetails.theftProtection">Theft Protection</li>
</ul>
</article>
Filters
<fieldset>
Doors:
<select data-ng-model="search.carDetails">
<option value="">All</option>
<option value="2">2</option>
<option value="4">4</option>
</select>
</fieldset>
...one thing I haven't been able to work out yet though, is how to add a group of checkboxes to apply a filter, for say, 'car type' which would have options like 'mini', 'compact', 'family' and so on - and the user would be able to filter by one or more option at a time. I know I need to use 'ng-model', and perhaps 'ng-change', I just don't know how to apply it to a group of checkboxes...?
Update: I've created a plunker so you can see where I'm up to:
http://plnkr.co/edit/lNJNYagMC2rszbSOF95k?p=preview

Answer 1

I would bind all the checkboxes to one object say:
app.js
$scope.cartypes = {mini: false, compact:false};
index.html
<input type="checkbox" data-ng-model="cartypes.mini"> Mini
<input type="checkbox" data-ng-model="cartypes.compact"> Compact
And then create a custom filter function which returns whether the object contains all (I assume thats what you want) of the checked options.
app.js
app.filter('myfilter', function() {
return function(items, options ) {
// loop over all the options and if true ensure the car has them
// I cant do this for you beacause I don't know how you would store this info in the car object but it should not be difficult
return carMatches;
};
});
Then you can add it to your template like this:
index.html
<article data-ng-repeat="result in results | filter:search | myfilter:cartypes" class="result">

Answer 2

I have implemented this solution like this:
#myapp.filter "storeFilter", ->
(stores, type) ->
_.filter stores, (store) -> type[store.name]
and in the view i have passed it like that:
store in stores | storeFilter:store_type