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>

我没有测试它，我也不推荐它。我宁愿写一个使数据变平的函数。

Angular JS ng-repeat嵌套数组

2 个答案: