CODEWITHSUNDEEP
javascriptangularjs
asprin
asprin

Reputation: 9823

Change in view doesn't update the model scope variable

So I've this as the HTML

<p>Total: $ {{total}}</p>
<p>Paid: $ {{paid}}</p>
<p>Due: $ {{due}}</p>
<div>
  <p>Cash: <input type="text" ng-model="cash" /></p>
  <p>Card: <input type="text" ng-model="card" /></p>
</div>

and this as Javascript

app.controller('myController', function($scope){
   $scope.total = 28;
   $scope.cash = 0;
   $scope.card = 0;
   $scope.paid = $scope.cash + $scope.card;
   $scope.due = $scope.total - $scope.paid;
});

So when the page loads, the values are getting populated as expected:

But when I type something into the Cash or Card textbox, the Paid and Due values aren't getting updated and remain at 0 and 28 respectively.

So in a sense, when I'm updating the view, the model isn't updating itself. I must be missing something pretty basic but it's been troubling me since the past hour.

EDIT

Here's the JSFiddle for your convienice

Upvotes: 0

Views: 59

Answers (4)

madhur
madhur

Reputation: 1001

Since there is already multiple working codes included in other answers I will keep my answer just to explanation.

Coming to your code, the problem here is that you have defined $scope.paid at top of controller, so it is executed once and then never comes to that line again in any digest cycle.

What is the solution-

There are two solutions, as in above answers-

1). Write the expression in view, every view expression will be recalculated whenever digest cycle runs again, so you will get updated value.

2).Set a watcher on variables, on which in whose value you want the view to be updated, this part is done in javascript.

I personally feel the first solution is more elegant and better way to achieve this.

Hope it helps

Upvotes: 1

PRANSHU MIDHA
PRANSHU MIDHA

Reputation: 472

Your values are updating but they are not visible as not event is being triggered on the value change. You can either use $watch or ng-change. Here's an example:

HTML Code: 

  <div ng-controller="myController">
    <p>Total: $ {{total}}</p>
    <p>Paid: $ {{paid}}</p>
    <p>Due: $ {{due}}</p>
    <div>
      <p>Cash:
        <input type="text" ng-model="cash" ng-change="sub()"/>
      </p>
      <p>Card:
        <input type="text" ng-model="card" ng-change="sub()"/>
      </p>
    </div>

  </div>

</div>

Controller Code:

var app = angular.module("myApp", []);
app.controller('myController', function($scope) {
  $scope.total = 28;
  $scope.cash = 0;
  $scope.card = 0;
  $scope.paid = 0;
  $scope.due = 0;
  $scope.sub=function(){
   $scope.paid = parseInt($scope.cash) + parseInt($scope.card);

$scope.due = parseInt($scope.total) - parseInt($scope.paid); }

});

Hope this helps!

Upvotes: 0

NKDev
NKDev

Reputation: 474

You can do this as well

<div ng-app="myApp">

  <div ng-controller="myController">
    <p>Total: $ {{total}}</p>
    <p>Paid: $ {{cash + card}}</p>
    <p>Due: $ {{total - (cash + card)}}</p>
    <div>
      <p>Cash:
        <input type="number" ng-model="cash" />
      </p>
      <p>Card:
        <input type="number" ng-model="card" />
      </p>
    </div>

  </div>

</div>

var app = angular.module("myApp", []);
app.controller('myController', function($scope) {
  $scope.total = 28;
  $scope.cash = 0;
  $scope.card = 0;
});

Fiddle updated

Upvotes: 1

ukn
ukn

Reputation: 1793

It might not be the best answer but it works.

var app = angular.module("myApp", []);
app.controller('myController', function($scope) {
  $scope.total = 28;
  $scope.cash = 0;
  $scope.card = 0;
  $scope.paid = 0;
  $scope.due = $scope.total - $scope.paid;
  $scope.$watch('[cash, card]', function() {
        $scope.paid = $scope.cash + $scope.card;
        $scope.due = $scope.total - $scope.paid;
    });
});

Upvotes: 1

Related Questions