angularjs - Angular JS ng-repeat嵌套数组

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