Why does angular js not automatically update twice of the number?

Question

I am an absolute newbie at angularjs and I am trying to write a code where the html should automatically display twice the number I enter -

This is what my code looks like -

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <link href="./style.css" rel="stylesheet"/>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.js"></script>
</head>

<body>
    <div ng-controller="frmCtrl">
      <label>Name:</label>
      <input type="text" ng-model="number" placeholder="Enter a name here">
      <hr>
      <h1>Hello {{twice}}!</h1>
    </div>

  <script>
    app = angular.module("myApp", []);
    app.controller("frmCtrl", function($scope) {
        $scope.number = "2";
        $scope.twice = 2*$scope.number;}
    );
  </script>
</body>
</html>

However, this code does not work at all - when I update the value in the input box, the twice is not updated automatically, although, initially it shows a value of 4 corresponding to twice of 2.

Why is this happening? And is there a better/correct way to achieve what I am trying to achieve here?

Thanks for your help

Pankaj Parkar · Accepted Answer · 2016-11-24 09:11:57Z

2

Better way would be, you could modify twice value on change of number value. For the same you could write ng-change function of number input field and modify twice value from change function.

<input type="text" ng-model="number" placeholder="Enter a name here" ng-change="updateTwice()"/>
<h1>Hello {{twice}}!</h1>

Code

$scope.updateTwice = function(){
   $scope.twice = 2 * $scope.number;
}

Another way could be change twice as function. Call twice on view binding so that will get evaluate on each digest cycle, making sure that whatever displayed on the view is 2 times of number ng-model.

<h1>Hello {{twice()}}!</h1>

Code

$scope.twice = function(){
 return 2*$scope.number;
}

answered Nov 24, 2016 at 9:11

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

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

2 Comments

Mortz Over a year ago

Thank you so much, @pankaj-parkar, that works perfectly. If you don't mind, can you please explain a bit more about the digest cycle?

Pankaj Parkar Over a year ago

@Mortz I'd highly recommend to go through this article

dfsq · Accepted Answer · 2016-11-24 09:17:53Z

1

Controller is executed only once, and of course $scope.twice is not going to magically update itself. You either make twice as a function (see other answer) or set up a watcher, or use ngChange directive.

I would use normal javascript Object.defineProperty, it would probably be the most efficient:

app.controller("frmCtrl", function($scope) {
  $scope.number = "2";
  Object.defineProperty($scope, 'twice', {
    get() {
      return 2 * $scope.number
    }
  })
});

edited Nov 24, 2016 at 9:17

answered Nov 24, 2016 at 9:15

dfsq

193k26 gold badges244 silver badges261 bronze badges

Comments

Paul Roefs · Accepted Answer · 2016-11-24 09:28:18Z

1

You cannot use a scope variable in another, you have use a function. One option is as above make $scope.twice a function, but when you need that to be a variable you can use ng-change.

  <input type="text" ng-model="number" ng-change="calc_twice()" placeholder="Enter a name here">

And in the controller:

    $scope.twice = "4";
    $scope.calc_twice = function() { $scope.twice = 2 * $scope.number };}

answered Nov 24, 2016 at 9:28

Paul Roefs

4782 gold badges5 silver badges13 bronze badges

Collectives™ on Stack Overflow

Why does angular js not automatically update twice of the number?

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