javascript - optimize angular filter performance -

javascript - optimize angular filter performance -

i filtering little dataset there still performance issues (ui thread freezing when filter not concise).

<input type="text" ng-model="vm.user" /> <table class="tbl" ng-show="vm.user.length > 2"> <tbody ng-repeat="p in vm.permissions | filter: {username: vm.user}:false">

the issue when there lot of records, i've attempted improve performance hiding whole thing when there less 3 characters entered in search.

unfortunately, when data-set hidden appears angular manipulating dom (ui freezing type filter).

is there way create not when there less characters, and/or improve performance in other ways?

i create 3 suggestions improve performance:

as new dev said, utilize ng-if instead of ng-show remove whole node dom, mean no processing of directives on removed nodes occur @ all. tend prefer ng-if in 99% of scenarios now, unless know visibility of alternative toggle lot , hence modifying class of existing node quicker inserting , removing same node on , on again. use track by in ng-repeat expression. means angular re-use dom nodes items in array have same matching value. e.g. if have track p.username (so long username 100% unique), if encounters record same username, utilize same dom node before, rather recreating new one. use ng-model-options have debounce on filter input if user typing fast, not every keystroke trigger new filtering operation. may need experiment find right timeout value works in target browsers.

i have created example plunkr shows these techniques in action. when tried 100,000 records in list of "permissions" (really dummy users in example), still fast in chrome. didn't test in other browsers, though.

javascript angularjs performance dom