Angular JS ng-repeatネストした配列

Question

ng-repeatを使用して配列を繰り返し処理しようとしていますが、適切な出力が得られません。

Index Items 
foo item1 
foo item2 
bar item1 
bar item2 

実際の出力：

Index Items 
foo ["item1","item2"] 
bar ["item1","item2"] 

誰でも正確なキー、リストの値を印刷するために私を助けて出力期待

<table> 
    <tr> 
    <th>Index</th> 
    <th>Items</th> 
    </tr> 
    <tr ng-repeat="li in list"> 
    <td ng-repeat="(key,value) in li">{{key}}</td> 
    <td ng-repeat="(key,value) in li">{{value}}</td> 
    </tr> 
</table> 


$scope.list = [ 
     {"foo": ["item1", "item2"]}, 
     {"bar": ["item1", "item2"]} 
    ]; 

。

Answer 1

結果を簡略化するカスタムフィルタまたは関数を作成できます。それはまた、ネストされたng-repeatの

$scope.simplyfiedList = []; 

$scope.list.forEach(function(item){ 
    Object.keys(item).map(function(key){ 
    item[key].map(function(i){ 
     $scope.simplyfiedList.push({key: key, value: i}); 
    }) 
    }) 
}); 

Htmlのは、おそらくこのような何かをする必要があると思いますあなたのデータの構造を考えると

<table class="table table-responsive"> 
    <tr> 
    <th>Index</th> 
    <th>Items</th> 
    </tr> 
    <tr ng-repeat="item in simplyfiedList"> 
    <td>{{item.key}}</td> 
    <td>{{item.value}}</td> 
    </tr> 
</table> 

Demo Plunker

Answer 2

を取り除くでしょう。

私はそれをテストしておらず、私はそれを推奨しません。私はむしろデータを平坦化する関数を書くだろう。