用于多维数组的嵌套 ng-repeat答案

【问题标题】：Nested ng-repeat for multidimensional array用于多维数组的嵌套 ng-repeat
【发布时间】：2016-08-09 07:15:41
【问题描述】：

我正在尝试使用 ng-repeat 指令在 html 中显示二维数组。我可以显示第一个维度（表格行），但第二个（表格数据）不起作用。我见过很多使用对象、JSON、键值数据结构的解决方案......但我找不到仅适用于包含其他数组的数组。以下是一些不成功的尝试。

HTML：（不起作用）

<div ng-app = "grid" ng-controller = "gridCtrl">
    <table>
        <tr ng-repeat = "y in grid">
            <td ng-repeat = "x in y"></td>
        </tr>
    </table>
</div>

HTML：（不起作用）

<div ng-app = "grid" ng-controller = "gridCtrl">
    <table>
        <tr ng-repeat = "y in grid">
            <td ng-repeat = "x in grid[$index]"></td>
        </tr>
    </table>
</div>

JS：

var grid = angular.module("grid", []);
grid.controller("gridCtrl", function($scope)
{
    $scope.grid = [[empty, empty, empty, empty, empty],
                   [empty, empty, empty, empty, empty],
                   [empty, empty, empty, empty, empty],
                   [empty, empty, empty, empty, empty],
                   [empty, empty, empty, empty, empty]];
});

【问题讨论】：

你的第一次尝试似乎很好。你能添加一些jsFiddle代码吗？
两种方法work fine here。任何控制台错误？你有不止一个ng-app 吗？显示更多代码并更新演示以重现问题
@charlietfl 它们起作用是因为数组中有不同的值，我的代码由于值重复而不起作用。

标签： javascript arrays angularjs multidimensional-array

【解决方案1】：

工作示例：

HTML：

<!DOCTYPE html>
<html ng-app="plunker">

<head>
  <meta charset="utf-8" />
  <title>AngularJS Plunker</title>
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>
  <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.9/angular.js" data-semver="1.4.9"></script>
  <script src="app.js"></script>
</head>

<body ng-controller="MainCtrl">
  <p>Hello {{name}}!</p>
  <div>
    <table>
      <tr ng-repeat="y in grid">
        <td ng-repeat="x in y track by $index">{{x}}</td>
      </tr>
    </table>
  </div>
</body>

</html>

JS：

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
  $scope.grid = [["empty", "empty", "empt", "empt", "empty"],
                  ["empty", "empty", "empt", "empt", "empty"]];
});

演示：http://plnkr.co/edit/yVC5nrH5Pv3Zzp8Py7FH?p=preview

由于您的数组数据包含重复项，因此您想添加 track by 以获得唯一 ID，因此我添加了 track by $index 更多关于此 https://docs.angularjs.org/error/ngRepeat/dupes 的信息

【讨论】：

那么，如果我知道我的代码因为只包含一个值而无法工作，那么“track by”会解决这个问题吗？
track by 添加只是因为您获得的数组数据包含相同的值，如果您的数组数据具有不同的值，您的代码将起作用。
请不要使用嵌套的 ng-repeat 尝试以这种方式制作对象。
这对我帮助很大
如果需要在 td 组件上使用 ng-model 需要使用 y[$index] 而不是 x。