Angularjs dynamically add values to $watch

Question

for some reason I can't get working $watch for dynamically changing array

$scope.a1 = 1;
$scope.a2 = 2;

$scope.q = [$scope.a1, $scope.a2];
$scope.$watch('q', function(newVal) {
  alert(newVal);
}, true);

nothing happened on change. Bug I get alert on the initialization.

http://jsfiddle.net/qwertmax/FtLH8/

this it just example of my project where I have to "watch" number of values (input fields). That fields generated automatically by json request.

So, I heed help with dynamically add values to "$watching"

Fixed: jsfiddle.net/H8JLr, you lost your reference when you can the value of a1 and a2 — Daiwei
– Daiwei, Commented Dec 25, 2013 at 21:24

Neikos · Accepted Answer · 2013-12-25 19:15:16Z

2

This is how I would solve this problem:

Since you will get the fields automatically generated I assumed you get an array of possible inputs back. Then you can automatically create the input fields and bind them. You can then watch that array. Something along the lines of this:

function TodoCtrl($scope) {
    $scope.inputs = [{
        label: "First Input",
        value: "Default Value"
    }, {
        label: "First Input",
        value: "Default Value"
    }]
    $scope.$watch("inputs", function (newVal) {
        alert("Changed an input");
    }, true);
}

The HTML:

 <div ng-repeat="inpt in inputs">
     <label>{{inpt.label}}</label>
     <input type="text" ng-model="inpt.value">
 </div>

answered Dec 25, 2013 at 19:15

Neikos

1,9901 gold badge23 silver badges35 bronze badges

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

2 Comments

qwertmax Over a year ago

thank for the answer, but the trick is in the push new values into inputs array after initialization.

Neikos Over a year ago

This is dynamic. Perhaps I am not understanding what you want? Check out this fiddle: jsfiddle.net/FtLH8/1 Is that what you meant? (The timeout is meant to simulate a possible HTTP Request)

charlietfl · Accepted Answer · 2013-12-25 21:15:06Z

1

Problem is that placing the variables in an array does not create a reference to the original variable since the originals are primitives. Thus your array never changes in your demo and the values you first place in it, remain the same when you update the variable that ng-model is bound to

You could bind ng-model to the array instead (ie ng-model=q[0]) but with angular is always a good rule to have a dot in ng-model, which means you are using objects not primitives

This demo shows how your array never changes:

http://jsfiddle.net/FtLH8/6/

edited Dec 25, 2013 at 21:15

answered Dec 25, 2013 at 21:06

charlietfl

172k14 gold badges125 silver badges154 bronze badges

Comments

kfis · Accepted Answer · 2013-12-26 10:17:57Z

0

what about $scope.$watchCollection()?

http://docs.angularjs.org/api/ng.$rootScope.Scope

sounds like it would been made for it

answered Dec 26, 2013 at 10:17

kfis

4,72925 silver badges19 bronze badges

Collectives™ on Stack Overflow

Angularjs dynamically add values to $watch

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related