detect changes in a JS Object using Angular js

Question

I have a javascript object suppose user is the name of my object and in angular js it looks like this

$scope.user = {
  name:'Arpit',
  class:'Computer Science',
  year:'2017',
  gender:'male'
}

This object I am fetching from the database and opening in the edit screen, now if in the HTML form if any field got changed by the user in edit mode I want to highlight the particular field using my CSS class applyborder. My logic is working for the first time when I am changing any field value but when I reset the value as original the class should be removed, but it is not removing the class. My angular js code is:

            //Value Change Detection
            Object.keys($scope.user).filter(function (key) {
                $scope.$watch('user.' + key, function (newVal, oldVal) {
                    if (newVal != oldVal) {
                        var ele = $('[ng-model="user' + '.' + key + '"]');
                        ele.addClass("applyborder");
                    }
                    else  if(oldVal == newVal){
                        var ele = $('[ng-model="user' + '.' + key + '"]');
                        ele.removeClass("applyborder");
                    }
                });
            });

It is treating last entered value as oldVal but it should treat to the value which comes from the database. Thanks.

Don't know, just thought to correct the syntax. so I just asked a question so that he may correct it if it was wrong. — Sravan
– Sravan, Commented Nov 30, 2016 at 6:29

Mohayemin · Accepted Answer · 2016-11-30 06:04:59Z

1

This is the expected behavior of $watch.

You can keep a copy of the object you received from database using angular.copy:

var originalUser = angular.copy($scope.user).

then check:

//Value Change Detection
        Object.keys($scope.user).filter(function (key) {
            $scope.$watch('user.' + key, function (newVal, oldVal) {
                if (newVal != originalUser[key]) {
                    var ele = $('[ng-model="user' + '.' + key + '"]');
                    ele.addClass("applyborder");
                }
                else  if(originalUser[key] == newVal){
                    var ele = $('[ng-model="user' + '.' + key + '"]');
                    ele.removeClass("applyborder");
                }
            });
        });

edited Nov 30, 2016 at 6:04

answered Nov 30, 2016 at 5:57

Mohayemin

3,8704 gold badges29 silver badges55 bronze badges

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

1 Comment

Arpit Kumar Over a year ago

This is working fine but I have some date fields it is not working for date fields. should we need to add some new Date() somewhere?

Icycool · Accepted Answer · 2016-11-30 07:13:19Z

0

Just apply it under ng-dirty class will do. You might have to isolate your css scope so it doesn't get applied everywhere.

<form class='myForm'>
  <input ng-model='xx' />
</form>

.myForm .ng-dirty {
  background-color: yellow;
}

If you need to reset the state, you'll need to give the form a name.

<form class='myForm' name='myForm'>

$scope.myForm.$setPristine();

answered Nov 30, 2016 at 7:13

Icycool

7,1991 gold badge27 silver badges33 bronze badges

Collectives™ on Stack Overflow

detect changes in a JS Object using Angular js

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related