Changes-aware list in angularjs

Question

I'm doing some work on existing angularjs code, and I have something of that sort: I have a list of objects on the client side, which I transfer via a put request to a server side.

The existing code simply takes the list of objects in the $scope and puts it in the json as is.

I want to implement a mechanism where only the objects that have been changed since some event would be sent.

I can do that hardcodedly and save another list of objects and clear it when I submit the changes, but I want something cleaner - f.e, a Changes aware list,

Then, I could do something in the sort of list.changedObjects.

I couldn't seem to find anything like that from basic research, so I was hoping you guys would know something about it.

You've described one of the core features of Angular, as well as React, Vue, Ember and a few others. — Marty, Mar 22 '16 at 06:41
If it is a core feature, how do I in fact use it? and thanks for the quick comment @Marty — Giora Guttsait, Mar 22 '16 at 06:42
Use $watch to track the changes on object if any object value will change it will execute. — Amit Sirohiya, Mar 22 '16 at 06:43
I don't really like Angular and haven't used it much but there's definitely a way to do what you want. — Marty, Mar 22 '16 at 06:43
@AmitSirohiya, as I've noted, I'm not particularly familiar with AngularJS, so a more detailed explanation would be welcome — Giora Guttsait, Mar 22 '16 at 06:44

notnotundefined · Answer 1 · 2016-03-22T07:05:41.490

0

I feel this is a use-case of Observer pattern. https://github.com/melanke/Watch.JS has an lib/example to observe changes in javascript object. Then you can trigger an event in Angular to do your job accordingly http://jsfiddle.net/2zT4C/23/

edited Mar 22 '16 at 07:05

answered Mar 22 '16 at 06:48

notnotundefined

3,493
3
30
39

score 0 · Answer 2 · edited May 23 '17 at 10:28

0

$watch helps to listen for $scope changes

AngularJS can then check the value returned against the value the watch function returned the last time. That way AngularJS can determine if the value has changed.

$scope.$watch('list', $scope.sendNewList, true);

it will will update innerHtml if new value of object is not equal to old value of object i.e if it has been changed.

For detailed info check this - $watch() or $watch

AngularJS watch array of objects for data change

edited May 23 '17 at 10:28

Community

1
1

answered Mar 22 '16 at 06:50

Amit Sirohiya

333
1
13

Say I have a list of objects, and I want to be watching all items of that list, how do I do that? – Giora Guttsait Mar 22 '16 at 06:55
To watch a list instead of returning "scope.data.myVar" return your list. – Amit Sirohiya Mar 22 '16 at 07:01
So how will I know which object in the list was changed? I assume that if I watch the list, I get the WHOLE new list in `newValue` – Giora Guttsait Mar 22 '16 at 07:04
i am assuming that your list is an array of objects. – Amit Sirohiya Mar 22 '16 at 07:07
1

Use $watchCollection instead $watch – Dima Fitiskin Mar 22 '16 at 07:13
Ohh @dima i never heard about $watchCollection but after having an overview i think it will solve Giora problem – Amit Sirohiya Mar 22 '16 at 07:18

Changes-aware list in angularjs

2 Answers2

$watch helps to listen for $scope changes