Filtering by multiple checkboxes in 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}}, &pound;{{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

martijnve · Accepted Answer · 2013-06-24 13:52:59Z

8

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">

edited Jun 24, 2013 at 13:52

answered May 9, 2013 at 10:01

martijnve

9832 gold badges10 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

ParkerDigital Over a year ago

Thanks for this. The problem is, the JSON is in a fixed format that I have no control over, so I think, in the case of 'car type', I need to work with strings. Apologies though if I'm just misunderstanding your solution!

martijnve Over a year ago

Sorry for the delay i was out yesterday. You should be able to iterate over all the cartypes in the array and check the string contains the key for all keys that map to true.

martijnve Over a year ago

Alternatively you could transform the string into a proper list after receiving the data. With the http service this can be done using a success callback (see docs.angularjs.org/api/ng.$http) using a resource object (which is basically a simple (perhaps too simple) rest wrapper.) it can be done with the $then method (docs.angularjs.org/api/ngResource.$resource). That way you only have to worry about the string once and work with a nice list from then on.

Leon · Accepted Answer · 2013-11-27 19:58:30Z

0

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

answered Nov 27, 2013 at 19:58

Leon

1,1361 gold badge11 silver badges17 bronze badges

Collectives™ on Stack Overflow

Filtering by multiple checkboxes in AngularJS

Filters

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

Filters

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related