optimize angularjs search filter

Question

Here are almost 2000 rows in the page. I use AngularJS filter to search some items which contains the typed strings. The problem is that efficiency is bad when typing one character into the input control. Do you guys have good ideas how to improve this filter? Here is the search code:

input box:

<input class="searchText ng-cloak" ng-model="searchText.ValueName" placeholder="Search Value" />

in the table's ng-repeat:

<tr ng-repeat="registry in currentSettings | filter:searchText" ....

string filter:searchText is used to filter.

You could add a limit? {{ limitTo_expression | limitTo : limit }} — Sjors van Dongen
– Sjors van Dongen, Commented Aug 19, 2014 at 6:44
possible duplicate of How to put a delay on AngularJS instant search? — thomaux
– thomaux, Commented Aug 19, 2014 at 6:53

roo2 · Accepted Answer · 2014-08-19 07:48:22Z

1

The bottleneck is likely adding and removing elements from the DOM. Avoid this by using css to hide elements. In stead of filtering the ng-repeat, use ng-show:

<li ng-repeat="registry in currentSettings" ng-show="([registry] | filter:searchText).length > 0">

http://php.quicoto.com/use-ng-show-filtering-data-angularjs/

There is also the virtual ng-repeat plugin, it only adds the dom nodes which are going to be rendered for better performance

edited Aug 19, 2014 at 7:48

answered Aug 19, 2014 at 7:42

roo2

6,0712 gold badges34 silver badges45 bronze badges

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

1 Comment

Zhao Leo Over a year ago

yep, bottleneck is operate elements from DOC, I use ng-table instead of normal table, and pagination tech, efficiency is better than before.

Oleg · Accepted Answer · 2014-08-19 07:57:27Z

0

I would also suggest to use the track by in the repeater. It will prevent unnecessary removal and reinsertion of elements and result in dramatic improvement in speed in some cases. Just make sure you are tracking by some unique property.

answered Aug 19, 2014 at 7:57

Oleg

9,4092 gold badges45 silver badges59 bronze badges

Collectives™ on Stack Overflow

optimize angularjs search filter

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related