angularjs ng-model inside ng-repeat has poor performance

Question

I have a performance problem with angular in the following scenario:

<div ng-repeat="a in array">
  <input ng-model="something">
</div>

I wrote code in my controller that on ng-click changes the array to have a different set of objects. The problem is that if the array has a decent amount of objects, the click is not as responsive as I would like it to be (short delay).

After some investigation, I noticed that the $digest takes a pretty long time after I change the array in my ng-click. So I created this short test code to reproduce it.

The real app scenario is this: I have a table in which every row represents an editable object and each object has many different fields I want to be able to edit. This way, whenever I click on a row in the table, there is another html that has all those ng-repeats with different inputs on the properties of my object.

Does anyone have an idea on how to make this more efficient?

Thanks

Answer 1

It is generally a bad idea to have too many input elements on the same page. This is why professional data grid editors opt for editing only a single data row at a time either in a separate pop-up window or in-line. Even when it is used in-line, the objects are injected on-the-fly.

An input element is simply too heavy to have too many of them on the same page. I have done the same mistakes in the past, trying to implement a data grid where all editable fields were input elements from the beginning. On top of that, you have to keep a live angular model binding, which adds a performance overhead.

One of the easiest ways to do it in your case is to implement a directive that displays as a span element until it is clicked and swap for an input element on click event. Another alternative – have both and toggle their visibility style. The latter is probably even easier from within angular directive, but not as efficient perhaps.

Also keep an eye on other bindings that you have. When it comes to data grids this becomes important. In Angular 1.3 you can now use "::" syntax for one-time bindings, which also may help.