How do I watch elements of an AngularDart collection?

Question

I have a model:

class WordList {
  List<Word> words = [];
}

It's created via dependency injection into one of my views.

@NgController(
    selector: '[list-ctrl]',
    publishAs: 'ctrl'
)
class ListCtrl {
  WordList wordList;
  Scope scope;

  ListCtrl(this.router, this.wordList, this.scope) {
    scope.$watchCollection("", onChange );
  }

I'd like to run some logic whenever an item is modified from that list. How do I accomplish this?

I believe the key is in the $watchCollection, but I can't figure out what to pass as a watch expression. "ctrl.wordList.words" will tell me when items are added/removed, but not changed.

score 6 · Accepted Answer · edited Jan 07 '14 at 01:46

6

$watchCollection as you point out can only watch for changes in the List not for changes in the items of the list. The reason for this is that watching each object would have explosive number of properties.

scope.$watch(() => wordList, onChange);

You could implement the onChange method in a way that it would create further watches on each new item as well as deregister the watch on item removal form the collection.

edited Jan 07 '14 at 01:46

Shailen Tuli

13,815
5
40
51

answered Jan 07 '14 at 01:25

Misko Hevery

47,936
11
40
36

2

I have similar question but this answer seems not up-to-date. `$watch` is just `watch` now. Also, `() => wordList` is no longer a valid expression. Can you update this answer to reflect recent changes to Angular Dart? I need to deep watch a map and I hope this should help. Thank you. – Nawaf Alsulami Apr 29 '14 at 22:48

How do I watch elements of an AngularDart collection?

1 Answers1

Linked