How to deep watch an array in angularjs

Question

There is an array of objects in my scope  I want to watch all the values of each object   This is my code   function TodoCtrl  scope       scope columns             field  title   displayName   TITLE            field   content   displayName   CONTENT             scope  watch  columns   function newVal           alert  columns changed               But when I modify the values  e g  I change TITLE to TITLE2  the alert  columns changed   never popped   How to deep watch the objects inside an array   There is a live demo  http   jsfiddle net SYx9b

User · Answer

x000D   x000D   scope changePass   function data   x000D       x000D      if data txtNewConfirmPassword     data txtNewPassword   x000D           scope confirmStatus   true  x000D       else  x000D           scope confirmStatus   false  x000D        x000D     x000D     lt form class  list  name  myForm  gt  x000D         lt label class  item item-input  gt          x000D           lt input type  password  placeholder                       ng-model  data txtCurrentPassword  maxlength  5  required gt  x000D         lt  label gt  x000D         lt label class  item item-input  gt  x000D           lt input type  password  placeholder                   ng-model  data txtNewPassword  maxlength  5  ng-minlength  5  name  checknawPassword  ng-change  changePass data   required gt  x000D         lt  label gt  x000D         lt label class  item item-input  gt  x000D           lt input type  password  placeholder                            ng-model  data txtNewConfirmPassword  maxlength  5  ng-minlength  5  name  checkConfirmPassword  ng-change  changePass data   required gt  x000D         lt  label gt        x000D          lt div class  spacer  style  width  300px  height  5px   gt  lt  div gt   x000D         lt span style  color red  ng-show  myForm checknawPassword  error minlength    myForm checkConfirmPassword  error minlength  gt                     5      lt  span gt  lt br gt  x000D         lt span ng-show  confirmStatus  style  color red  gt                       lt  span gt  x000D         lt br gt  x000D         lt button class  button button-positive  button-block  ng-click  saveChangePass data   ng-disabled  myForm  invalid    confirmStatus  gt         lt  button gt  x000D       lt  form gt  x000D   x000D   x000D

User · Answer

It s worth noting that in Angular 1 1 x and above  you can now use  watchCollection rather than  watch  Although the  watchCollection appears to create shallow watches so it won t work with arrays of objects like you expect  It can detect additions and deletions to the array  but not the properties of objects inside arrays

User · Answer

You can set the 3rd argument of  watch to true    scope  watch  data   function  newVal  oldVal               true     See https   docs angularjs org api ng type  rootScope Scope  watch  Since Angular 1 1 x you can also use  watchCollection to watch shallow watch  just the  first level  of  the collection    scope  watchCollection  data   function  newVal  oldVal                  See https   docs angularjs org api ng type  rootScope Scope  watchCollection

User · Answer

watchCollection accomplishes what you want to do  Below is an example copied from angularjs website http   docs angularjs org api ng type  rootScope Scope While it s convenient  the performance needs to be taken into consideration especially when you watch a large collection      scope names     igor    matias    misko    james       scope dataCount   4      scope  watchCollection  names   function newNames  oldNames          scope dataCount   newNames length           expect  scope dataCount  toEqual 4      scope  digest         still at 4     no changes   expect  scope dataCount  toEqual 4       scope names pop       scope  digest         now there s been a change   expect  scope dataCount  toEqual 3

User · Answer

If you re going to watch only one array  you can simply use this bit of code    scope  watch  columns   function          some value in the array has changed     true      watching properties   example  But this will not work with multiple arrays    scope  watch  columns   ANOTHER ARRAY   function          will never be called when things change in columns or ANOTHER ARRAY    true     example  To handle this situation  I usually convert the multiple arrays I want to watch into JSON    scope  watch function        return angular toJson   scope columns   scope ANOTHER ARRAY              function          some value in some array has changed     example  As  jssebastian pointed out in the comments  JSON stringify may be preferable to angular toJson as it can handle members that start with     and possible other cases as well

User · Answer

There are performance consequences to deep-diving an object in your  watch   Sometimes  for example  when changes are only pushes and pops   you might want to  watch an easily calculated value  such as array length

User · Answer

Here is a comparison of the 3 ways you can watch a scope variable with examples    watch   is triggered by    scope myArray        scope myArray   null   scope myArray   someOtherArray     watchCollection   is triggered by everything above AND    scope myArray push         add element  scope myArray splice 0  1      remove element  scope myArray 0           assign index to different value    watch      true  is triggered by EVERYTHING above AND    scope myArray 0  someProperty    someValue     JUST ONE MORE THING      watch   is the only one that triggers when an array is replaced with another array even if that other array has the same exact content    For example where  watch   would fire and  watchCollection   would not    scope myArray     Apples    Bananas    Orange      var newArray       newArray push  Apples    newArray push  Bananas    newArray push  Orange      scope myArray   newArray    Below is a link to an example JSFiddle that uses all the different watch combinations and outputs log messages to indicate which  watches  were triggered    http   jsfiddle net luisperezphd 2zj9k872

User · Answer

In my case  I needed to watch a service  which contains an address object also watched by several other controllers  I was stuck in a loop until I added the  true  parameter  which seems to be the key to success when watching objects    scope  watch function         return LocationService getAddress       function address          handle address object    true

User · Answer

This solution worked very well for me  i m doing this in a directive   scope  watch attrs testWatch  function            true    the true works pretty well and react for all the chnages  add  delete  or modify a field    Here is a working plunker for play with it   Deeply Watching an Array in AngularJS  I hope this can be useful for you  If you have any questions  feel free for ask  I ll try to help

User · Answer

Setting the objectEquality parameter  third parameter  of the  watch function is definitely the correct way to watch ALL properties of the array    scope  watch  columns   function newVal        alert  columns changed      true       lt - Right here   Piran answers this well enough and mentions  watchCollection as well   More Detail  The reason I m answering an already answered question is because I want to point out that wizardwerdna s answer is not a good one and should not be used   The problem is that the digests do not happen immediately   They have to wait until the current block of code has completed before executing   Thus  watch the length of an array may actually miss some important changes that  watchCollection will catch   Assume this configuration    scope testArray          val 1        val 2       scope  watch  testArray length   function newLength  oldLength        console log  length changed     oldLength    - gt     newLength         scope  watchCollection  testArray   function newArray        console log  testArray changed          At first glance  it may seem like these would fire at the same time  such as in this case   function pushToArray          scope testArray push  val 3      pushToArray        Console output    length changed  2 - gt  3    testArray changed   That works well enough  but consider this   function spliceArray            Starting at index 1  remove 1 item  then push  val  3        testArray splice 1  1   val  3      spliceArray        Console output    testArray changed   Notice that the resulting length was the same even though the array has a new element and lost an element  so as watch as the  watch is concerned  length hasn t changed    watchCollection picked up on it  though   function pushPopArray          testArray push  val  3         testArray pop      pushPopArray        Console output    testArray change   The same result happens with a push and pop in the same block   Conclusion  To watch every property in the array  use a  watch on the array iteself with the third parameter  objectEquality  included and set to true   Yes  this is expensive but sometimes necessary   To watch when object enter exit the array  use a  watchCollection   Do NOT use a  watch on the length property of the array   There is almost no good reason I can think of to do so

[angularjs] How to deep watch an array in angularjs?

Examples related to angularjs

Examples related to watch