Watch an entire object (deep clock) with AngularJS

Question

This is the angular-resource variable / object scope that represents the form data:

  $scope.form = { name: 'bob', email: ' [e-mail] ' } 

I see how my variable name changes.

  $scope.$watch('form.name', function(newVal) { if(newVal) { alert(newVal) } }); 

How could one see if any of the names was changed - name, email address or any kind of scope.form?

My goal is to make my form “keep” disabled or enabled, depending on whether the user has changed something on the form.

Answer 1

There is a third parameter, $watch() , which will make it check the equality of the object (deep watch).

  $scope.$watch('form', function(newVal) { //watch the whole object if(newVal) { alert(newVal); } }, true); //pass "true" here. 

To complete my answer, both of these approaches lead to the same result in this case: Live demo here (click). but $watchCollection shallow and will not watch anything embedded in the changes.

  $scope.$watch('form', function(newForm, oldForm) { console.log(newForm.name); }, true); 

OR: (not deep hours)

  $scope.$watchCollection('form', function(newForm, oldForm) { console.log(newForm.name); }); 

Answer 2

Since AngularJS 1.1.x, the preferred way to view multiple values ​​in an array or object properties is $ watchCollection http://docs.angularjs.org/api/ng.$rootScope.Scope

 $scope.$watchCollection('form', function(newValues, oldValues) { console.log('*** Watch has been fired. ***'); console.log('New Names :', newValues);} );