Angular JS ng-重複嵌套數組

Question

我想用ng-repeat迭代數組，但沒有得到正確的輸出。

<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"]} 
    ]; 

預期輸出：

Index Items 
foo item1 
foo item2 
bar item1 
bar item2 

實際輸出：

Index Items 
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

鑑於數據的結構，你可能不得不做這樣的事情。

<div ng-repeat="li in list"> 
    <div ng-repeat="(key, itemArray) in li"> 
     <tr ng-repeat="item in itemArray"> 
      <td>{{key}}</td> 
      <td>{{item}}</td> 
     </tr> 
    </div> 
</div> 

我沒有測試它，我也不會推薦它。我寧願寫一個使數據變平的函數。