使用AngularJS ng-repeat从JSON创建平铺贴图

Question

我正在尝试使用ng-repeat为游戏创建一个平铺地图，并且在连续负责单个平铺的ng-repeat代码时遇到问题。如果这是香草JS我会没有遇到麻烦，但这已经困扰了我一段时间了。 I found this answer which seems really close我正在寻找但我无法弄清楚如何将其应用于我的特定JSON文件。

HTML

<div class='map' ng-controller='map'>
    <div class='map-row' ng-repeat='row in rows'>
        <div class='map-tile' ng-repeat='row in rows'>
            {{ row.data[$index] }}
        </div><!-- end of .map-tile -->
    </div><!-- end of .map-row -->
</div><!-- end of .map -->

控制器

app.controller('map', function($scope, $http) {
    $http.get('/map.json')
    .success(function(response) {
        $scope.rows = response.rows;
    });
});

JSON

{
    "rows": [ 
        {
            "data":[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1]
        },
        {
            "data":[1, 0, 0, 3, 2, 2, 2, 2, 3, 3, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1]
        },
        {
            "data":[1, 0, 3, 2, 2, 2, 2, 2, 2, 2, 3, 0, 0, 0, 0, 0, 0, 0, 0, 1]
        },
        {
            "data":[1, 0, 3, 2, 2, 2, 2, 2, 2, 3, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1]
        }
}

（截断以节省空间。）

结果

结果的问题是ng-repeat指令错误地遍历每一行 - 我无法弄清楚我应该在这一行中放入第二个ng-repeat而不是'row in rows'：< / p>

<div class='map-tile' ng-repeat='row in rows'>

下面的图片突出显示了每行输出中显示的数组项：

Answer 1

正如您所猜测的那样，问题在于ng-repeat遍历列。

您的HTML应如下所示：

<div class='map' ng-controller='map'>
  <div class='map-row' ng-repeat='row in rows'>
    <div class='map-tile' ng-repeat='col in row.data track by $index'>
        {{ col }}
    </div><!-- end of .map-tile -->
  </div><!-- end of .map-row -->
</div><!-- end of .map -->

第一个ng-repeat遍历行。第二个ng-repeat应遍历每行中的data数组。

希望这有帮助！