javascript - example - Anidada ng-repeat para matriz multidimensional



ng repeat bootstrap (1)

Estoy tratando de mostrar una matriz bidimensional en html usando la directiva ng-repeat . Puedo mostrar la primera dimensión (filas de la tabla) pero la segunda (datos de la tabla) no está funcionando. He visto muchas soluciones usando objetos, JSON, estructuras de datos de valores-clave ... Pero no puedo encontrar algo que funcione solo para una matriz que contenga otras matrices . Aquí hay algunos intentos fallidos.

HTML: (no funciona)

<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: (no funciona)

<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]];
});

Ejemplo de trabajo:

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="[email protected]" 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"]];
});

demo: http://plnkr.co/edit/yVC5nrH5Pv3Zzp8Py7FH?p=preview

Como los datos de su matriz contienen duplicados, desea agregar una track by para obtener una ID única, así que agregué una track by $index más sobre este https://docs.angularjs.org/error/ngRepeat/dupes





multidimensional-array