Question

我有一个如下所示的数组

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

在上面的数组中，我可以将多个ui元素绑定到数字作为文本框。我想更改每个文本框值以更新testData上的“Total”。

示例：

如果我有3个文本框绑定到Number1，值为10,20,30，则总值应为60，即10 + 20 + 30。

我尝试使用$ scope。$ watch，我不知道如何在数组中查看列表数组。

请帮忙。

Answer 1

尝试使用：

<div class="top-area">
  <div id="top_image_div"></div>
  <div class="header-overlay">Scroll down!</div>
</div>
<div class="someContainer">
  Some Content here
</div>

在您的控制器中，定义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>

更改另一个属性时的角度更新属性

2 个答案: