watch an object in controller Angularjs

Question

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.form = {
        name: 'my name',
        age: '25'
    }

    $scope.$watch('form', function(newVal, oldVal){
        console.log(newVal);
    },true);
    
    $scope.foo= function(){
    $scope.form.name = 'abc';
    $scope.form.age = $scope.form.age++;
    }
    $scope.foo();
    
    $scope.bar= function(){
    $scope.form.name = 'xyz';
    $scope.form.age = $scope.form.age++;
    }
    $scope.bar();
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">{{form}}<br>
<label>Name:</label> <input type="text" ng-model="form.name"/><br>
        <label>Age:</label> <input type="text" ng-model="form.age"/>  </div>

In controller I changed 'form' object property four time,But $watch not firing. From UI(input) if I change it works

aorfevre · Accepted Answer · 2017-06-13 12:31:31Z

2

Your case is that I assume that the angular Digest cycle did not had time to pass during all your rapid updates.

Here is some references to understand more the digest cycle of Angular 1.X:

https://www.thinkful.com/projects/understanding-the-digest-cycle-528/ https://www.ng-book.com/p/The-Digest-Loop-and-apply/

The prevent that kind of behaviour; your can force the digest to pass using $timeout ( that has a $apply) dependency : https://docs.angularjs.org/api/ng/service/$timeout

Example:

$timeout(function(){
    $scope.form.name = name;
    $scope.form.age = $scope.form.age++;
})

I have created a jsfiddle to illustrade your case :

http://jsfiddle.net/IgorMinar/ADukg/

answered Jun 13, 2017 at 12:31

aorfevre

5,0744 gold badges23 silver badges54 bronze badges

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

Comments

Burak Akyıldız · Accepted Answer · 2017-06-13 15:00:56Z

1

We can use watchgroup for this

$scope.$watchGroup(['form.name', 'form.age'], function(newValues, oldValues, scope) {
//...
});

edited Jun 13, 2017 at 15:00

Burak Akyıldız

1,64216 silver badges26 bronze badges

answered Jun 13, 2017 at 12:57

Veera Bhadra

2003 silver badges13 bronze badges

Collectives™ on Stack Overflow

watch an object in controller Angularjs

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related