4

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.

Ende Neu
  • 15,581
  • 5
  • 57
  • 68
Zhao Leo
  • 101
  • 1
  • 3
  • You could add a limit? `{{ limitTo_expression | limitTo : limit }}` – Sjors van Dongen Aug 19 '14 at 06:44
  • possible duplicate of [How to put a delay on AngularJS instant search?](http://stackoverflow.com/questions/15304562/how-to-put-a-delay-on-angularjs-instant-search) – thomaux Aug 19 '14 at 06:53

2 Answers2

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

actual_kangaroo
  • 5,971
  • 2
  • 31
  • 45
  • 1
    yep, bottleneck is operate elements from DOC, I use ng-table instead of normal table, and pagination tech, efficiency is better than before. – Zhao Leo Aug 22 '14 at 07:48
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.

Oleg
  • 9,341
  • 2
  • 43
  • 58