filter data using dropdown?

angularjs angularjs-ng-repeat angularjs-filter
Malcr001 picture Malcr001 · Jun 6, 2013 · Viewed 26.1k times · Source

I have an array of objects which are just items. I also have a dropdown which I would like to use to allow the user to filter by price or rating however on page load there should be no filtering.

How do I map item data to filter based on the current select option?

I have a plunkr to get started: LINK

Answer

callmekatootie picture callmekatootie · Jun 6, 2013

First and foremost, your select values are ambiguous. They contain values that can filter AND sort the entries - Separate the two since they are two different functionality.

Next, you need to define a custom Filter which will filter the data based on the rating selected. For this, you enhance the filtering criteria with the "Rating" property to associate the rating selected with a rating value.

Finally, associate the sorting with a predicate and a reverse value - the predicate determines the property / column to determine for the sort (price in your case) while the reverse determines the ascending / descending nature of the sort.

The entire code can be found here - http://plnkr.co/edit/n7TebC?p=preview

I have updated the plunkr and introduced comments so let me know if you do not understand a code.

Related questions

Angular.js ng-repeat filter by property having one of multiple values (OR of values)

Is it possible to filter an array of objects, such that the value of property can be either of a few values (OR condition) without writing a custom filter This is similar to this problem - Angular.js ng-repeat :filter …

Read More
Angularjs OrderBy on ng-repeat doesn't work

I'm trying to use AngularJS for my first project (a tournaments manager) and the orderBy filter on ng-repeat doesn't work :( I have read all the documentation about that, but nothing to do :/ So, I have vars defined on $scope like …

Read More
ng-repeat filter on boolean

I am trying to filter on a boolean value in an ng-repeat. List of unregistered users: <h3>Unregistered Users</h3> <div ng-repeat="user in users | filter:!user.registered"> <div class="row-fluid"> <…

Read More