多維數組的嵌套ng-repeat

我正在嘗試使用ng-repeat指令在html中顯示一個二維數組。我可以顯示第一維（表格行），但第二維（表格數據）不起作用。我已經看到很多使用對象，JSON，鍵值數據結構的解決方案......但是我找不到適用於的僅僅包含其他數組的數組。以下是一些不成功的嘗試。

HTML：（開不工作）多維數組的嵌套ng-repeat

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

來源

2016-04-17 aurelienC

你的第一次嘗試似乎很好。你可以添加一些jsFiddle代碼？ – Dvir

兩種方法[在此處均可正常工作]（http://plnkr.co/edit/soiWMahMfEF8DnMkL2Ic?p=preview）。任何控制檯錯誤？也許你有多個'ng-app'？顯示更多代碼並更新演示以重現問題 – charlietfl

@charlietfl他們工作是因爲您在數組中有不同的值，因爲值重複，我的代碼不工作。 – aurelienC

工作例如：

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

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

當你的陣列數據包含複製您要添加track by獨特的ID，因此我已經爲此添加更多

來源

2016-04-17 16:28:12 sreeramu

所以如果我明白我的代碼不工作，因爲它只包含一個值，'跟蹤'解決這個問題？ – aurelienC

'track by'只是因爲您給出的數組數據包含相同的值而添加'track by'，如果您的數組數據具有不同的值，則您的代碼將起作用。 – sreeramu

請不要使用嵌套的ng-repeat 嘗試以這種方式製作對象。 – Devank

多維數組的嵌套ng-repeat

回答

相關問題