Verschachtelte ng-Wiederholung für multidimensionales Array

Ich versuche ein zweidimensionales Array in HTML mit der ng-Repeat-Direktive anzuzeigen. Ich kann die erste Dimension (Tabellenzeilen) anzeigen, aber die zweite (Tabellendaten) funktioniert nicht. Ich habe viele Lösungen mit Objekten, JSON, Schlüssel-Wert-Datenstrukturen gesehen ... Aber ich kann nicht finden, was funktioniert für nur ein Array mit anderen Arrays. Hier sind einige erfolglose Versuche.

HTML: (does't Arbeit)Verschachtelte ng-Wiederholung für multidimensionales Array

<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: (funktioniert nicht)

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

Quelle

2016-04-17 aurelienC

Der erste Versuch von Ihnen scheint gut. Können Sie etwas JsFiddle Code hinzufügen? – Dvir

beide Methoden [funktionieren hier] (http://plnkr.co/edit/soiWMahMfEF8DnMkL2Ic?p=preview). Irgendwelche Konsolenfehler? hast du vielleicht mehr als eine ng-app? Zeige mehr Code und aktualisiere Demo, um das Problem zu reproduzieren – charlietfl

@charlietfl Sie arbeiten, weil Sie differents Werte im Array haben, funktioniert mein Code nicht wegen der Wertwiederholung. – aurelienC

Arbeitsbeispiel:

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

Als Ihr Array doppelte Daten enthält, die Sie track by für eindeutige ID hinzufügen möchten so Ich hatte hinzugefügt track by $index mehr über diese https://docs.angularjs.org/error/ngRepeat/dupes

Quelle

2016-04-17 16:28:12 sreeramu

Also, wenn ich verstehe, mein Code funktionierte nicht, weil es nur einen Wert enthielt, und 'track by' das zu beheben? – aurelienC

'track by' wird nur hinzugefügt, weil die Array-Daten, die Sie erhalten, denselben Wert enthalten. Wenn Ihre Array-Daten unterschiedliche Werte haben, wird Ihr Code funktionieren. – sreeramu

Bitte verwenden Sie nicht verschachtelte ng-repeat Versuchen Sie, das Objekt so zu machen. – Devank

Verschachtelte ng-Wiederholung für multidimensionales Array

Antwort

Verwandte Themen