2017-06-29 20 views
0

現在、私はangularJSのforEachメソッドを使用して2つのオブジェクトをマップし、アコーディオンで表示しようとしています。私は実際に私が望む結果を得ているわけではありません...それは本当にフィルタリングしていないか、htmlで必要な正しいデータを吐き出していません。ここforEachをangularJSのアコーディオンにマップする方法

私はこれまで...

HTML持っているものです:私はちょうどよ

$scope.otherFees = [{'name': 1, 'text': 'ok', 'amount': 2}, {'name': 2, 'text': 'hello', 'amount': 3}, {'name': 3, 'text': 'cool', 'amount': 3}] 

$scope.fees = [ 
    { 
    'headingName': 'firstHeader', 
    'feeBag': [ 
     {'name': 1} 
    ] 
    }, 
    { 
    'headingName': 'secondHeader',  
    'feeBag': [ 
     {'name': 2} 
    ] 
    }, 
    { 
    'headingName': 'thirdHeader',  
    'feeBag': [ 
     {'name': 3} 
    ] 
    } 
] 

<accordion ng-repeat="fee in fees"> 
    <accordion-group ng-if="fee.feeBag.length"> 
    <accordion-heading> 
     {{fee.headingName}} 
    </accordion-heading> 
     <div class="feecode-height" ng-repeat="feeParameter in fee.feeBag"> 
     <div class="row"> 
      <div class="col-xs-1">{{feeParameter.name}}</div> 
      <div class="col-xs-4">{{feeParameter.text}}</div> 
      <div class="col-xs-2" >{{feeParameter.amount}}</div> 
     </div> 
     </div> 
    </accordion-group> 
</accordion> 

はコントローラー:

angular.forEach($scope.fees, function(value, key) { 
    angular.forEach(value.feeBag, function(value2, key2) { 
    if (value.feeBag[key2].name === $scope.otherFees.name) { 
     value.feeBag[key2].text = $scope.otherFees.text; 
     value.feeBag[key2].amount = $scope.otherFees.amount; 

     return value.feeBag[key2];    
    } else { 
     // remove the ones that dont belong 
     // value.feeBag.splice(key, 1); 
    } 

    }); 
}); 

JSON値を私が行くべき場所にこだわった次に....名前を見出して値をグループ化し、個々のセットを行に表示させるように設定したようです。

すべての助けに感謝:D

+0

'ng-if =" fee.feeBag.length "を' ng-if = "fee.feeBag.length> 0" 'に変更してみてください。 – Yatin

+0

ヘッダーはうまくいきます。 – jeremy

+0

ブートストラップアコーディオンなどを使用しようとしていますか?ブートストラップのものはパネルクラスのdivタグを使用してアコーディオンに変換されます。 – Yatin

答えて

1

$scope.otherFees項目の各値をチェックするために内部に別のループを追加します。

angular.forEach($scope.fees, function(value, key) { 
    angular.forEach(value.feeBag, function(value2, key2) { 
     angular.forEach($scope.otherFees, function(value3, key3){ 
     if (value.feeBag[key2].name === value3.name) { 
      value.feeBag[key2].text = value3.text; 
      value.feeBag[key2].amount = value3.amount; 

      return value.feeBag[key2];    
     } else { 
      // remove the ones that dont belong 
      // value.feeBag.splice(key, 1); 
     } 
     }) 
    }); 
    }); 

jsFiddleを見てください。私はそれを更新しました。私はそれがあなたが探していたものだと願っています。

+0

素晴らしい!これは完璧に機能しました! – jeremy

関連する問題