在 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

我已经创建了 JSON 像你的数组一样的对象。

        $scope.myArray = [
            {
                name: 'Array 1',
                myArray: [
                    {name: '1'},
                    {name: '2'}
                ]
            }, {
                name: 'Array 2',
                myArray: [
                    {name: '3'},
                    {name: '4'}
                ]
            }
        ];

在您的 HTML 代码中创建 table 如下所示

<table class="table table-bordered">
    <tr ng-repeat="row in myArray">
        <td ng-repeat="childrow in row.myArray">
            <span data-ng-bind="childrow.name"></span>
        </td>
    </tr>
</table>

输出如下所示

Answer 2

您可以使用特殊的重复开始和结束标记，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

在 tr 中嵌套 ng-repeat

Nested ng-repeat in tr

foreach

angularjs

angularjs-ng-repeat