0

Whenever I change a value in an array which is used for an ng-repeat, the Ng-style directive's function is getting fired for all the items in my array. See example and notice the console logs for the "getStyle(text)" function.

http://jsbin.com/panotuyepe/1/edit?html,js,console,output

Is there any way we can prevent angular from dirty checking all the other values inside the array since they didn't change? The change was isolated to only one item in the array list. No other ng-repeated items need to be checked.

alex.blender
  • 1
  • 1

2 Answers2

1

It is because your input has ng-model="item.text". change it to value="{{item.text}}"

Check out the modified JSBin

Josh
  • 694
  • 7
  • 10
  • I did that for a reason i need the array item's value to update when i change the input. I need the data binding to work... But I don't want angularjs re-evaluating all the other items in the array. – alex.blender May 02 '15 at 15:04
0

After thinking about this for a few hours, here is what I came up with. I created a custom directive that binds to the 'input change' event. Once the input changes the scope is updated via the call back function of the event. I then fire a $digest on the scope of only the row that has the change by traversing up the scope chain to the $parent scope and triggering the $digest.

This is a HUGE performance improvement! If the list is long you will see a major difference. Each 'input change' event now only triggers 2 calls to my ng-style function on only the row that changed...

http://jsbin.com/daqoxajazu/1/watch?html,js,console,output

If anyone else has a better solution please let me know.

alex.blender
  • 1
  • 1