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。< / p>

从某种意义上说，当我更新视图时，模型不会自行更新。我必须遗漏一些非常基本的东西，但自从过去一小时以来一直困扰着我。

修改

以下是您的信任的JSFiddle

Answer 1

这可能不是最好的答案，但它确实有效。

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

Answer 2

你也可以这样做

<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

Answer 3

由于其他答案中已包含多个工作代码，我将仅以解释为准。

来到你的代码，这里的问题是你已经在控制器顶部定义了$ scope.paid，所以它被执行一次，然后在任何摘要周期中再也不会到达那一行。

解决方案是什么 -

有两种解决方案，如上面的答案 -

1）。在视图中编写表达式，每当摘要周期再次运行时，每个视图表达式都将重新计算，因此您将获得更新的值。

2）。在变量上设置一个观察者，你想要更新视图的值，这部分是用javascript完成的。

我个人认为第一种解决方案是更优雅，更好的方法来实现这一目标。

希望有所帮助

Answer 4

您的值正在更新，但它们不可见，因为未在值更改时触发事件。您可以使用$ watch或ng-change。这是一个例子：

HTML代码：

  <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>

控制器代码：

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）; }

});

希望这有帮助！

视图中的更改不会更新模型范围变量

修改

4 个答案: