Вычисление суммы нескольких вложенных циклов в угловом

Question

Я пытаюсь вычислить общую сумму в вложенном ng-повторе. В консоли я получаю ошибку и суммарную сумму неправильно. Ссылка на код: 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> 

Мои ЯШ:

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>