#ngrepeat

Alternative to ngRepeat for AngularJS

I’ve been playing around with AngularJS repeaters for a while and they tend to be on the slow side with large complex objects, bindings and watches. Here is a littler plunker (at bottom of post) example of another way of displaying repeating data which should be a lot faster than using the out of the box AngularJS ngRepeat directive.

It is stripped right back and very basic but I think you should…

I ran into a problem: Displaying 60 elements on an ng-repeat caused the browser to freeze for several seconds.

I went through the code and couldn’t find any issue at all on the computational orders that I was dealing with. So I went for the easy hack: paginate and show 10 at a time. Does this help?

This fixed my issue but I felt like it was not a “good enough” approach: Lets really fix this.

So I started profiling the CPU of the JS usage with Chrome: ok, my JS is minified, lets undo that step.

Changed my Gruntfile.js so it took the non .min files and ran into this:

Pretty clear the issue was with “triggerAnimationStart”. Mhhh... “animation”, huh? I do not use any animation in this page:

$animate.enabled(false);

Lets try now:

Angularjs add remove elements #angularjs #ngRepeat #ngClick

We have seen how we can add remove elements from DOM using jQuery and JavaScript.

Let’s see how we can achieve the same using Angularjs. Angularjs makes life very easy for us. Unlike JavaScript and jQuery, we don’t have to worry about DOM traversing or DOM manipulation; courtesy something really useful: angularjs directives. In this post we shall see the use of ngClick and ngRepeat directives.

Le…