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:

  • 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:

  • About Rick

    Senior Front-end Software Engineer from Barcelona, Haidong Gumdo Instructor (korean martial art of the sword), street photographer, travel lover, TV addict, Boston Red Sox fan, and privacy advocate.

    Leave a Reply

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