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
– Marty, Commented Mar 22, 2016 at 6:41
If it is a core feature, how do I in fact use it? and thanks for the quick comment @Marty — Giora Guttsait
– Giora Guttsait, Commented Mar 22, 2016 at 6:42
Use $watch to track the changes on object if any object value will change it will execute. — Amit Sirohiya
– Amit Sirohiya, Commented Mar 22, 2016 at 6: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
– Marty, Commented Mar 22, 2016 at 6:43
@AmitSirohiya, as I've noted, I'm not particularly familiar with AngularJS, so a more detailed explanation would be welcome — Giora Guttsait
– Giora Guttsait, Commented Mar 22, 2016 at 6:44

notnotundefined · Accepted Answer · 2016-03-22 07:05:41Z

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, 2016 at 7:05

answered Mar 22, 2016 at 6:48

notnotundefined

3,8294 gold badges35 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Community · Accepted Answer · 2017-05-23 10:28:05Z

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, 2017 at 10:28

CommunityBot

11 silver badge

answered Mar 22, 2016 at 6:50

Amit Sirohiya

3331 silver badge13 bronze badges

6 Comments

Giora Guttsait Over a year ago

Say I have a list of objects, and I want to be watching all items of that list, how do I do that?

Amit Sirohiya Over a year ago

To watch a list instead of returning "scope.data.myVar" return your list.

Giora Guttsait Over a year ago

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

Amit Sirohiya Over a year ago

i am assuming that your list is an array of objects.

Dima Fitiskin Over a year ago

Use $watchCollection instead $watch

|

Collectives™ on Stack Overflow

Changes-aware list in angularjs

2 Answers 2

Comments

$watch helps to listen for $scope changes

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

$watch helps to listen for $scope changes

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related