AngularJS binding not updating model

Question

I recently started exploring AngularJS. I saw some similar questions but I'm quite sure that there isn't any scope problem here. (or maybe my understanding of scope isn't clear.)

JS Code:

var app = angular.module("myApp", []);
app.controller("myController", function($scope){
$scope.b=50000
$scope.apr=10
$scope.hc=$scope.b/$scope.apr
...
})

HTML:

<div ng-app="myApp" ng-controller="myController">
<span class="inp-heading">b:</span>
<input ng-model="b" type="number" step="1000" min="0" />
<input ng-model="apr" type="number" step="1" min="0" />
{{b}} <br /> <!-- this updates on input value change -->
{{hc}} <br /> <!-- this does NOT update on input value change -->
{{b/apr}} <br /> <!-- this updates on input value change -->

As mentioned in the comments (in the HTML code above) $scope.hc doesn't change. This isn't the only issue actually, I'm facing similar trouble while binding array values to input boxes.

Any help would be appreciated.

It would be great if you comment before down voting.

Joe
– Joe

2017-12-29 08:44:16 +00:00
Commented Dec 29, 2017 at 8:44 — Joe
– Joe, Commented Dec 29, 2017 at 8:44

dfsq · Accepted Answer · 2017-12-29 08:53:51Z

Since controller function is not going to be reinvoked when you just change some of the models, the value of $scope.hc won't be recalculated. You need to update it manually or get recalculated value somehow before rendering. Couple of approaches.

1. ngChange directive

Use ngChange directive (kind of onchange event) to update $scope.hc value:

var app = angular.module("myApp", []);
app.controller("myController", function($scope){
  $scope.b = 50000
  $scope.apr = 10
  $scope.hc = $scope.b/$scope.apr

  $scope.onChange = function () {
    $scope.hc = $scope.b/$scope.apr
  }
})

HTML

<input ng-model="b" ng-change="onChange()" type="number" step="1000" min="0" />
<input ng-model="apr" ng-change="onChange()" type="number" step="1" min="0" />

2. Using getter

You can use old gold ES5 property getter here when defining hc as a property of $scope object:

var app = angular.module("myApp", []);
app.controller("myController", function($scope){
  $scope.b = 50000
  $scope.apr = 10

  Object.defineProperty($scope, 'hc', {
    get: function () {
      return $scope.b/$scope.apr
    }
  })
})

HTML won't change in this case.

Aswin Ramesh · Accepted Answer · 2017-12-29 08:47:40Z

1

your hc won't update automatically, if needed then it should be a function like

var app = angular.module("myApp", []);
app.controller("myController", function($scope){
  $scope.b=50000
  $scope.apr=10
  $scope.hc= function() { return $scope.b/$scope.apr; };
  ...
})

and then in your partial it should be (instead of hc, it will be hc())

<div ng-app="myApp" ng-controller="myController">
<span class="inp-heading">b:</span>
<input ng-model="b" type="number" step="1000" min="0" />
<input ng-model="apr" type="number" step="1" min="0" />
{{b}} <br /> 
{{hc()}} <br /> 
{{b/apr}} <br />

answered Dec 29, 2017 at 8:47

Aswin Ramesh

1,6741 gold badge13 silver badges13 bronze badges

2 Comments

Joe Over a year ago

Why was the expression not being updated automatically when values were changed?

Aswin Ramesh Over a year ago

bcoz the scope value hc is initialized from the values of b and apr, the value of the is expression stored for hc, not the expression

Collectives™ on Stack Overflow

AngularJS binding not updating model

2 Answers 2

1. ngChange directive

2. Using getter

Comments

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1. ngChange directive

2. Using getter

Comments

2 Comments

Related