多次元配列のネストされたng-repeat

私はに、ng-repeatディレクティブを使用してhtmlで2次元配列を表示しようとしています。私は最初の次元（テーブルの行）を表示することができますが、2番目の（テーブルのデータ）は動作していません。私は、オブジェクト、JSON、キー値のデータ構造を使用して多くのソリューションを見てきました...しかし、他の配列を含む配列のを見つけることはできません。ここにいくつか失敗した試みがあります。

HTML：（does't作業）多次元配列のネストされた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

あなたの配列データを使用して、とてもユニークIDのtrack byを追加したい複製含まれていたよう私はこれについてさらにtrack by $indexを追加しましたhttps://docs.angularjs.org/error/ngRepeat/dupes

出典

2016-04-17 16:28:12 sreeramu

私はコードが1つの値しか含まれていないためにコードが動作していないと理解していて、これを修正して 'track by'ですか？ – aurelienC

'track by'が追加されたのは、与えられた配列データに同じ値が含まれているからです。 – sreeramu

ネストされたng-repeatを使用しないでください。オブジェクトをそうするようにしてください。 – Devank

多次元配列のネストされたng-repeat

答えて

関連する問題