更改另一個屬性時的角度更新屬性

Question

我有一個如下所示的數組

var testData = {
    section1: [{
        Number1: 0
    }],
    Total: 0
}

在上面的數組中，我可以將多個ui元素綁定到數字作為文本框。 我想更改每個文本框值以更新testData上的“Total”。

例：

如果我有3個文本框綁定到Number1，值為10,20,30，則總值應為60，即10 + 20 + 30。

我嘗試使用$ scope。$ watch，我不知道如何在數組中查看列表數組。

請幫忙。

Answer 1

嘗試使用：

<input type="text" ng-change="updateTotal ()" />

在您的控制器中，定義updateTotal以計算新的總計。

官方文檔： https ： //docs.angularjs.org/api/ng/directive/ngChange

Answer 2

您可以創建一個函數來計算總數並顯示該值。 AngularJS 1.x“雙重綁定”將完成其余的工作。

 var myApp = angular.module('myApp',[]); myApp.controller('MyCtrl', ['$scope', function($scope) { // added more data for demonstration $scope.testData = { section1: [{ Number1: 0 }, { Number1: 0 }, { Number1: 0 }], Total: 0 }; $scope.trackTotal = function() { var total = 0; // I tried using reduce but didn't work, still figuring why for (var i = 0; i < $scope.testData.section1.length; i++) { total += Number($scope.testData.section1[i].Number1); } // keeping the object property updated $scope.testData.Total = total; console.log($scope.testData.Total); return total; }; }]); 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="myApp" ng-controller="MyCtrl"> <ul ng-repeat="data in testData.section1"> <li> Number1[{{$index}}] <input type="text" ng-model="data.Number1"> </li> </ul> <p>{{trackTotal()}}</p> </div>