Updating Other Variable When Variable is Changed in Input

Question

In my code (snippet example below), I have a variable that is bound to an input box using the ng-model directive. Then, I have another variable that, for the purpose of my project, is dependent on that bound variable.

How do I keep (in the case of the example below) bar up to date when foo changes?

I tried using the $scope.$watch function call (which I show the syntax I used below), but the bound function does not get called when the user types something into the input box.

HTML

...
<div ng-controller="exampleController as ctr">
    ...
    <div><input type="number" ng-model="ctr.foo" /></div>
    <div>{{ ctr.bar }}</div>
</div>

Javascript

app.controller('ExampleController', function($scope){
    var local = this;        

    this.foo = 5;
    this.bar = 10;

    this.updateBar = function(){
        this.bar = this.foo * 2;
    };

    $scope.$watch('foo', function(){
        local.updateBar();
    });
});

Note: All of this is just example code to show what my problem is.

Betty St · Accepted Answer · 2015-11-14 21:40:40Z

1

There is no need for $watch, if you use ng-change? ;)

<div ng-controller="exampleController as ctr">
...
  <div><input type="number" ng-model="ctr.foo" ng-change="ctr.updateBar()" /></div>
  <div>{{ ctr.bar }}</div>
</div>

More info: https://docs.angularjs.org/api/ng/directive/ngChange

answered Nov 14, 2015 at 21:40

Betty St

2,91024 silver badges37 bronze badges

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

1 Comment

Ava Over a year ago

Didn't even know I could do that tbh. Thanks very much!

Sophie Zhang · Accepted Answer · 2015-11-14 21:14:57Z

0

Try to use a scope function:

HTML

<div ng-controller="exampleController">
    ...
    <div><input type="number" ng-model="foo" /></div>
    <div>{{ bar() }}</div>
</div>

Javascript

app.controller('ExampleController', function($scope){      

    $scope.foo = 5;
    $scope.bar = function(){
          return  $scope.foo * 2;
    };

});

answered Nov 14, 2015 at 21:14

Sophie Zhang

664 bronze badges

Collectives™ on Stack Overflow

Updating Other Variable When Variable is Changed in Input

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