Object Compare in AngularJS

Question

I have a form which when loaded sends GET request to server and recives data which will stored in 'master' and i copy that data to 'local' as below.

$scope.dirty = false;

init(data);

function init(data) {
    $scope.master = angular.copy(data.data);
    $scope.local = angular.copy($scope.master);
}

Now, I use local object as model for my form and I have to button submit and reset. I watch the local object as below.

  $scope.$watchCollection('local', function (newLocal, oldLocal) {
    $scope.dirty = !angular.equals(newLocal, $scope.master);
});

So, If dirty is true then i can know that data has been modified but since I am using Objects AngularJS adds $$hasKey to $scope.local and because of that $scope.dirty always sets to true.

So, is there any way to handle this problem? I am new to AngularJS so may be this can be funny question but I'm stuck.

cl3m · Accepted Answer · 2016-03-05 13:59:02Z

1

You could convert your object to a JSON string before comparing:

function init(data) {
    // store json data into $scope.master for later comparison
    $scope.master = angular.toJson(data.data);
    $scope.local = angular.copy(data.data);
}

$scope.$watchCollection('local', function (newLocal, oldLocal) {
    var json = angular.toJson(newLocal); // new local without $$ key
    $scope.status.dirty = !angular.equals(json, $scope.master);
    // $scope.local is still a javascript object
});

edited Mar 5, 2016 at 13:59

answered Mar 5, 2016 at 13:50

cl3m

2,80121 silver badges21 bronze badges

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

7 Comments

nextt1 Over a year ago

If I use this code then $scope.local = angular.copy($scope.local) wont work. So, I must use $scope.local = angular.copy(data.data) right ?

cl3m Over a year ago

how so ? you could introduce another variable then?

cl3m Over a year ago

What do you mean, it does not work? It does not do what you want, or it throws an error? Plus, in your post, you mention $scope.dirty but you have $scope.status.dirty, is it a spelling mistake?

nextt1 Over a year ago

Yes that was my mistake. After using your code $scope.dirty still has true value.

cl3m Over a year ago

Can you add console.log() statements to see the temporary results?

|

nextt1 · Accepted Answer · 2016-03-09 05:57:29Z

0

I was sending data form PHP and PHP treats Number and string as seperate datatype. So I converted those Number data to string and now It works as desired and also I leart that whenever I use <form name='newForm> angularJS creates a new scope named newForm so that I can you many properties of that scope like $dirty, $pristinem $submitted and many more. so Now I dont have to write this logic by myself

answered Mar 9, 2016 at 5:57

nextt1

4,0082 gold badges20 silver badges27 bronze badges

Collectives™ on Stack Overflow

Object Compare in AngularJS

2 Answers 2

7 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related