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

Performance

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:

Tags:

3 Responses to “Use ng-show for filtering data – AngularJS”

  1. Juan David Nicholls Cardona May 14, 2015 at 8:01 pm #

    Thanks, is very useful 😀

    Regards.

  2. bnmdev February 10, 2016 at 11:27 am #

    Thanks !

    • Rick February 13, 2016 at 8:52 pm #

      You’re welcome!

Leave a Reply

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