Use ng-show for filtering data – AngularJS

A few days ago I've started playing with AngularJS. In words of Bon Scott, it's a love at first feel.

While going thorough tutorials and demo apps I've learned something you don't easily find in those simple "filter results" demo apps. You know, a simple input text that filters a list live:

search angularjs app


In my demo I was working with a jSON file with about 600 items. Not much but enough to make the live search a bit slow.

Not because of the live filter itself but because of the DOM manipulation I believe. This is the code I had, copied from the tutorial:

<li ng-repeat="item in items | filter:myFilter">

This works like black magic. It removes / adds items from the DOM in a blink of an eye, pretty cool. However, like I said, slow with huge data. I did some research and I've found there's a directive called ng-show that hides/show elements instead of deleting them. Same result, better performance:

<li ng-repeat="item in items" ng-show="([item] | filter:myFilter).length > 0">

Leave a Reply

Add <code> Some Code </code> by using this tags.