視圖更改不會更新模型范圍變量

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 。

因此，從某種意義上說，當我更新視圖時，模型並沒有更新自身。 我一定錯過了一些基本的東西，但是自從過去一個小時以來，這一直困擾着我。

編輯

這是您方便的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;
});

小提琴更新

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

});

希望這可以幫助！