javascript - View 的更改不会更新模型范围变量

Question

所以我把它作为 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>

这是 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;
});

因此，当页面加载时，值将按预期填充:

• 现金输入框设置为0
• 卡片输入框设置为0
• 总数显示为 28
• 付费显示为 0
• 到期时间显示为 28

但是当我在现金或卡文本框中输入内容时，Paid 和 Due 值不会更新并保持在 0和 28 分别。

所以从某种意义上说，当我更新 View 时，模型并没有更新自身。我一定错过了一些非常基本的东西，但从过去一个小时以来它一直困扰着我。

编辑

这是JSFiddle为了您的方便

Answer 1

你也可以这样做

<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