angularjs - 在 tr 中嵌套 ng-repeat

Question

我是 AngularJS 的新手，我在 tr 中遇到嵌套循环的问题。

这是我的数组:

Array
(
    [1] => Array
    (
        [0] => Array
            (
                [detail-1] => 1
                [detail-2] => 2
            )

        [1] => Array
            (
                [detail-3] => 3
                [detail-4] => 4
            )

    )

    [2] => Array
    (
        .....
    )
)

希望在 AngularJS 中输出。

<tr>
    <td>1</td>
</tr>
<tr>
    <td>detail-1</td>
    <td>detail-2</td>
</tr>
<tr>
    <td>detail-3</td>
    <td>detail-4</td>
</tr>
...........

那么，如何从逻辑上解决这个问题？

提前致谢。

Answer 1

您可以使用特殊的重复开始和结束标记，ng-repeat-start 和 ng-repeat-end 来定义最顶层元素的 DOM 元素范围数组:

angular
.module('demo', [])
.controller('DemoCtrl', function($scope) {
  $scope.nestedArray = [
      ['foo', 'bar'], 
      ['baz']
  ];
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="demo">
  <div ng-controller="DemoCtrl">
    <table>
      <tbody>
        <tr ng-repeat-start="item in nestedArray">
          <td>
            {{$index}}
          </td>
        </tr>
        <tr ng-repeat-end>
          <td ng-repeat="subitem in item">
            {{subitem}}
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Source