ネストされたng-repeatの項目の合計

Question

ng-repeatの内部でいくつかの計算をしようとしていますが、リストから各ネストされたng-repeatの総価格を取得したいとします。

<div class="Container" ng-repeat="items in list"> 

    <div class="top">i am in the top {{items.date}}</div> 

    <div class="item" ng-repeat="item in items"> 
     <a>{{item.count}}</a> 
     <a ng-init="setTotals(total = (item.count * item.price))">{{item.price}}</a> 
    </div> 

    <div class=bottom">total price: {{totalPrice}}</div> 

</div> 

これは私が取得しようとする角度範囲である：

$scope.setTotals = function (total) { 
     $scope.totalPrice = total * total; 
    } 

が、これは単に1つの項目の出力を倍増、どのように私はすべての項目の合計金額を得ることができるだろうネストされたng-repeat？項目のリストを想定し

Answer 1

は次のようである：

$scope.list = [ 
    {date: '2017-12-14', items: [ 
     {count: 3, price: 9}, 
     {count: 1, price: 20} 
    ]}, 
    {date: '2017-12-15', items: [ 
     {count: 2, price: 10}, 
     {count: 5, price: 20} 
    ]} 
]; 

そして、あなたが機能して一日あたりの価格の合計を計算したいこと：

$scope.calculateTotal = function (dayItems) { 
    let total = 0; 
     for (item of dayItems.items) { 
      total += (item.count * item.price); 
     }; 
    return total; 
} 

HTMLは次のように次のようになります。

<div class="Container" ng-repeat="items in list"> 

    <div class="top">i am in the top {{items.date}}</div> 

    <div class="item" ng-repeat="item in items.items"> 
     <a>{{item.count}}</a> 
     <a>{{item.price}}</a> 
    </div> 

    <div class=bottom">total price: {{calculateTotal(items)}}</div> 

</div> 

working demo plunkerを参照してください。もちろん、ニーズに合わせてコードを変更することもできますが、これは単なる実装例です。

Answer 2

コントローラに機能を追加します。

$scope.getTotalPrice = function(items) 
{ 
    return items.reduce(function(sum, item) 
    { 
     return (sum + (item.count * item.price)); 
    }, 0); 
}; 

HTMLでそれを呼び出す：

<div class="Container" ng-repeat="items in list"> 

    <div class="top">i am in the top {{items.date}}</div> 

    <div class="item" ng-repeat="item in items"> 
     <a>{{item.count}}</a> 
     <a>{{item.price}}</a> 
    </div> 

    <div class=bottom">total price: {{ getTotalPrice(items) }}</div> 

</div> 

Answer 3

あなたがここに何ができるかは、お使いのコントローラで計算ロジックを実行し、ちょうどあなたのビューでその結果を表示することです：

はJavaScript：

$scope.totalPrice = $scope.items..reduce((sum, item) => { 
    return (sum + item.count * item.price); 
}, 0); 

HTML：

<div class="Container" ng-repeat="items in list"> 

    <div class="top">i am in the top {{items.date}}</div> 

    <div class="item" ng-repeat="item in items"> 
    <a>{{item.count}}</a> 
    <a>{{item.price}}</a> 
    </div> 

    <div class=bottom ">total price: {{totalPrice}}</div> 

</div>