AngularJSフィルタと概要

Question

私はオブジェクトがあります：HTMLで

$scope.basketList = [{id : A1, name : metal}, 
{id : A2, name : plastic}, 
{id : B1, name : fiber}]; 

$scope.itemList = [{ id : 1, basket_id : 'A1', ctg : 'fruit', stok : 3}, 
{ id : 2, basket_id : 'A2', ctg : 'fruit', stock : 2}, 
{ id : 4, basket_id : 'A1', ctg : 'fruit', stock : 4}, 
{ id : 5, basket_id : 'B1', ctg : 'fruit', stock : 1}, 
{ id : 6, basket_id : 'B1', ctg : 'fruit', stock : 2}, 
{ id : 7, basket_id : 'A1', ctg : 'fruit', stock : 4}, 
{ id : 8, basket_id : 'A2', ctg : 'fruit', stock : 2}]; 

：株式をフィルタリングし、合計する方法

<div class="stock"> 
<div ng-repeat="basket in $scope.basketList> 
    <div>Basket : {{basket.name}}</div> 
    <div ng-repeat="item in itemList | filter : {basket_id : basket.id}"></div> 
</div> 
</div> 

を。 ので、出力は次のようになり：

• 金属

  friut、ストック= 11

• プラスチック

  果物、ストック= 4

• ファイバ

  果実、在庫= 3

Answer 1

簡単な答えとして、合計株価と「ctg」を計算する関数を作成することができます。例

$scope.getTotal = function(basket) { 
    var totalStock = $scope.itemList.reduce(function(total, curr){ 
    if (curr.basket_id === basket.id) return total + curr.stock; 
    return total; 
    }, 0); 
    return totalStock; 
} 

$scope.getCtg = function(basket) { 
    for (var i = 0; i < $scope.itemList.length; i++) { 
    if (basket.id === $scope.itemList[i].basket_id) return $scope.itemList[i].ctg; 
    } 
    return 'not found'; 
} 

ためのあなたのテンプレートを調整する必要があります：

<div class="stock"> 
<div ng-repeat="basket in basketList"> 
    <div>Basket : {{basket.name}}</div> 
    <span ng-bind="getCtg(basket)"></span>, 
    <span ng-bind="getTotal(basket)"></span> 
</div> 

ここで完全jsfiddleです：あなたは、おそらくより一般的になるだろう実際のアプリケーションではもちろんhttp://jsfiddle.net/2c3pmhpa/4/

これはあなたの単純なケースでうまくいくはずです。