Question

我正在尝试计算嵌套ng-repeat中的总和。在控制台中我得到一个错误和总和错误。代码链接：Plunker。我的模板和js

<div ng-controller="MyController" class="container">

<div ng-repeat="key in goods">
    <h3>{{key.name}}</h3>
    <div ng-repeat="good in key.group">
        <h4>{{good.goodName}}</h4>
        <ul>
           <li>Count: <input ng-model="good.items" value="{{good.items}}" type="text"></li>
           <li>Times: <input ng-model="good.times" value="{{good.times}}" type="text"></li>
           <li>Sum: {{sum(good)}}</li>
        </ul>
    </div>  
</div>

<div class="total">
    <h2>Total sum: {{total()}}</h2>
</div>

</div>

我的js：

var app = angular.module('myApp', []);

app.controller('MyController', ['$scope', function($scope){


$scope.allSum = 0;

$scope.sum = function(good) {
    $scope.allSum += good.items * good.times;   
    return good.items * good.times;
};

$scope.total = function() {
    return $scope.allSum;
};


$scope.goods = [

    {

        'name': 'name 1',
        'group': [

                    {
                        'goodName': 'good 1',
                        'items': '4',
                        'times': '2',
                        'sum': '8',
                        'id': '1'
                    },
                    {
                        'goodName': 'good 2',
                        'items': '2',
                        'times': '2',
                        'sum': '4',
                        'id': '2'
                    }

                   ]
    },
    {


        'name': 'name 2',
        'group': [

                    {
                        'goodName': 'good 3',
                        'items': '1',
                        'times': '10',
                        'sum': '10',
                        'id': '3'
                    },
                    {
                        'goodName': 'good 4',
                        'items': '3',
                        'times': '1',
                        'sum': '3',
                        'id': '4'
                    }

                   ]

    }




];

}]);

在控制台中我有错误：错误：[$ rootScope：infdig]和错误的总和。

Answer 1

问题是你的功能运行了两次。更好更清洁的方法是使用更新所有内容的监视功能：

$scope.$watch('goods', function(newValue) {
    if (newValue !== undefined) {
        $scope.allSum = 0;
        angular.forEach(newValue, function(val, key) {
            angular.forEach(val.group, function(v, k) {
                v.sum = v.items * v.times;
                $scope.allSum += v.sum;
            });
        });
     }
}, true);

现在你可以完全摆脱总和和总函数。然后只需更新你的html：

<div ng-controller="MyController" class="container">
    <div ng-repeat="key in goods">
        <h3>{{key.name}}</h3>
        <div ng-repeat="good in key.group">
            <h4>{{good.goodName}}</h4>
            <ul>
               <li>Count: <input ng-model="good.items" value="{{good.items}}" type="text"></li>
               <li>Times: <input ng-model="good.times" value="{{good.times}}" type="text"></li>
               <li>Sum: {{good.sum}}</li>
            </ul>
        </div>  
    </div>

    <div class="total">
        <h2>Total sum: {{allSum}}</h2>
    </div>
</div>

以角度计算几个嵌套循环的总和

1 个答案: