Создание карты плитки из JSON с использованием AngularJS ng-repeat

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

(усеченное для экономии места .)

Результат

Проблема с результатом является то, что нг-повтор инструкции итерация каждой строки неправильно - я не могу понять, что я должен положить в секунду нг-повтор на этой строке вместо «строки в строках»:

<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 в каждой строке.

Надеюсь, это поможет!