Question

我想画一个canvas元素的网格。网格的每个元素都有一个颜色属性和一个id。这就是我创建二维数组的方法：

$scope.hexGrid = new Array();
for (var i = 0 ; i < GRIDSIZE ; i++) {
    $scope.hexGrid[i] = new Array();
}

for (var i = 0 ; i < GRIDSIZE ; i++) {
    for (var j = 0 ; j < GRIDSIZE ; j++) {
        var hex = {color: "green", id: i * GRIDSIZE + j};
        $scope.hexGrid[i].push(hex);
    }
}

现在这是我的问题。如何使用ng-repeat和这个二维数组显示网格？我应该嵌套2 ng-repeat（一个用于列，一个用于行）？

<span ng-repeat="hex in hexGrid[1] track by hex.id">
    <canvas id="myCanvas" width="100" height="100" style="border:1px solid #000000;"></canvas> 
</span>

第一次ng-repeat适用于固定行，但我应该如何进行第二次ng-repeat？

（最后，这是一个很好的方法吗？）

Answer 1

是的，你应该嵌套ng-repeats。另外，我建议你使用class =“myCanvas”而不是id来表示明显的html标记。

<span ng-repeat="arr in hexGrid">
    <span ng-repeat="hex in arr track by hex.id">
        <canvas id="myCanvas" width="100" height="100" style="border:1px solid #000000;"></canvas>
    </span>
</span>

Answer 2

是的，你可以让它完全动态。

代码如下：

控制器：

<div ng-repeat="outer in hexGrid">
   <div ng-repeat="inner in outer">
     {{inner.name}}
   </div>
</div>

HTML：

ts_min
--------
24429000    
24428340
24427680

AngularJS - 使用ng-repeat显示网格

2 个答案:

控制器：

HTML：