1

I have been extending one of the demos on angularjs site to add more dynamic filtering.

I have 3 filters:

  1. Query filter via an input field.

  2. Order filter via select field.

  3. Number of results to show via a select field.

While all 3 work independently I'm having trouble with the 3rd when the 1st has been filed out. I want the dropdown options within the 3rd select field to retain the initial count.

I have the following FIDDLE. Entering the word 'dell' in the input field gives 2 results which works fine.

This gives the following options on the 3rd filter. 'ALL', '1', '2'. However when I try selecting the '1' on this 3rd filter (to only display one result) everything disappears.

Firstly I have no idea why this is happening - as this functionalitly works fine when you search for the word 'moto'. And secondly it would be nice to preserve the initial results number of results in the 3rd filter.

when I type 'moto' into the 1st field it displays 10 results and the following numbers are still displayed in the 3rd field. 'ALL', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10'.

What I would like is when clicking on any of the above numbers in the 3rd field, they all still remain. Currently when I click on '3' for example then only the following are displayed 'ALL', '1', '2', '3'.

Code.

 <div class="form-group"> <label for="search">Search:</label> <input id="search" ng-model="query"> </div> <div class="form-group"> <label for="sort">Sort by:</label> <select id="sort" ng-model="phoneCtrl.orderProp"> <option value="name">Alphabetical</option> <option value="age">Newest</option> <option value="-age">Oldest</option> </select> </div> <div class="form-group"> <label for="show">Show:</label> <select id="show" ng-model="phoneCtrl.limitProp"> <option value="">All</option> <option ng-repeat="phone in filtered" value="{{$index+1}}">{{$index+1}}</option> </select> </div> <ul class="phones list-unstyled"> <li ng-repeat="phone in filtered = (phoneCtrl.phones | limitTo : phoneCtrl.limitProp : begin | filter:query | orderBy:phoneCtrl.orderProp)"> <article class="phone"> <h2 class="h3">{{phone.name}}</h2> <p>{{phone.snippet}}</p> </article> </li> </ul>
Improve this question

1 Answer 1

Reset to default
2

For your third filter to limit to a number of items, you need to repeat on phoneCtrl.phones not the filtered as the filtered object will change but phoneCtrl.phones won't.

<option ng-repeat="phone in phoneCtrl.phones" value="{{$index+1}}">{{$index+1}}</option>

To get the filters working together, move the limitTo filter outside of the definition for the filtered object otherwise your filters will only be looking through n number of phones.

<li ng-repeat="phone in filtered = (phoneCtrl.phones | filter:query | orderBy:phoneCtrl.orderProp) | limitTo : phoneCtrl.limitProp : begin ">

Updated Fiddle

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

2 Comments

Thanks - works really nice now. Although i did add back in the filtered on the repeat as that is the functionality I want. It was putting the limitTo outside the definition that gave me the exact results I wanted. Brill.. + 1 Edited Fiddle
I see what you mean now. Your original way works far better.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.