Angularjs not updating variables

Question

I want to display/update the calculation answer directly without the need of aditional buttons. Or do i need a function and button to apply the changes?

<div ng-app="myApp" ng-controller="myCtrl">

A_Number: <input type="number" step="1" ng-model="A_Number"><br> 

Display (A_Number): {{A_Number}}
<br>
square: {{square}} 
</div>

controller:

<script> 
var app = angular.module('myApp', []); 
app.controller('myCtrl', function($scope) {

$scope.square = $scope.A_Number * $scope.A_Number; 
}); 
</script>

Pankaj Parkar · Accepted Answer · 2016-01-30 14:15:40Z

4

Make square as a method & use that method in interpolation directive, so that will evaluate on each digest.

Markup

square: {{square()}}

Code

$scope.square = function(){
    //made error free
    if(!isNaN($scope.A_Number))
      return $scope.A_Number * $scope.A_Number;
    return 0;
};

answered Jan 30, 2016 at 14:15

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

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

1 Comment

Pankaj Parkar Over a year ago

@Medera glad to hear that.. Thanks :)

Sumit Deshpande · Accepted Answer · 2016-01-30 14:50:16Z

0

Add watch on A_Number to achieve the same. JSFiddle for reference - https://jsfiddle.net/9a2xz61y/3/

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.square = 0;
  $scope.$watch('A_Number', function(newValue, oldValue) {
    {
      if (!isNaN(newValue)) {
        $scope.square = $scope.A_Number * $scope.A_Number;
      }
    }
  });
});

edited Jan 30, 2016 at 14:50

answered Jan 30, 2016 at 14:28

Sumit Deshpande

2,1552 gold badges21 silver badges36 bronze badges

2 Comments

Sumit Deshpande Over a year ago

Yes agree - when object is complex and more fields to watch. I just mentioned as different approach to achieve the result.

Pankaj Parkar Over a year ago

still it shouldn't, also you should not use true option at the end of watcher, as here its no meaning for it

Collectives™ on Stack Overflow

Angularjs not updating variables

2 Answers 2

1 Comment

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Related