AngularJS conflit with limitTo and filter in ngrepeat

Question

I have a ng-repeat with lot of keywords (> 100 000) that's why I use limitTo: but I would like to be able to search in ALL.

Search: <input ng-model="filter:queryKeywords" type="text" placeholder="Filter" autofocus>

<label ng-repeat="k in keywords | limitTo:totalDisplayed | orderBy | filter:queryKeywords">
   {{k}}
</label> 

<!-- Will load 100+ keywords -->
<button class="btn btn-primary" ng-click="seeMore()">See More</button>

The problem is my search only works for items that I can see.

I would like to search in all items (even the one that I can't display).

Thanks!

It's because the filter in in the template so it would apply to the rendered element only. You need a filter at the data level instead then you can control the limit from there too. angular UI grid would probably work perfectly here though its built in filter are quite good and affect the all data. — GillesC
– GillesC, Commented Nov 28, 2014 at 9:46
Thanks for your help. Please could you show me an example, not sure to understand well. — Jose
– Jose, Commented Nov 28, 2014 at 9:47
Given the amount of keywords, perhaps you should also consider doing the search in the backend and returning only the limitTo keywords you want, that would send less data through the network and making the frontend to process less data too (of course, I'm assuming you have a backend you can modify, right?) — germanio
– germanio, Commented Sep 10, 2017 at 21:39

gkalpak · Accepted Answer · 2017-05-11 14:48:46Z

9

You should change the order of the filters, so that searching comes first (and thus applies to all data) and limiting/ordering come afterwards:

ng-repeat="k in keywords | 
           filter:queryKeywords |
           limitTo:totalDisplayed |
           orderBy"

edited May 11, 2017 at 14:48

answered Nov 28, 2014 at 9:57

gkalpak

48.2k8 gold badges108 silver badges120 bronze badges

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

1 Comment

Onur Topal Over a year ago

@Jose just out of curiosity how this is different?

gkalpak · Accepted Answer · 2014-11-28 12:36:47Z

4

Angular applies filters in order. Changing the order of the filters should fix your problem.

<label ng-repeat="k in keywords | filter:queryKeywords | limitTo:totalDisplayed | orderBy">

This means: First filter, then limit the results to totalDisplayed and finally order it.

edited Nov 28, 2014 at 12:36

gkalpak

48.2k8 gold badges108 silver badges120 bronze badges

answered Nov 28, 2014 at 9:50

Onur Topal

3,0611 gold badge26 silver badges44 bronze badges

2 Comments

gkalpak Over a year ago

@Jose, OnurTOPAL: I just noticed that Onur posted an (almost identical) answer a few minutes before mine. I think his answer should be the accepted one. Onur, there is slight error in your wording: It's filters not directives (directives are something totally different). Please, correct that to avoid confusion.

Onur Topal Over a year ago

@ExpertSystem Thanks edited. to be honest really don t care about the accepted answer thought there is a problem with mine.

Collectives™ on Stack Overflow

AngularJS conflit with limitTo and filter in ngrepeat

2 Answers 2

1 Comment

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Related