Вложенные ng-repeat в Angularjs отображаются на том же уровне

Question

У меня есть json, который я буду использовать для создания некоторых html-графиков отображения вкладок и кнопок.

упрощенная версия моей JSON заключается в следующем:

[{"id": "A","buttons":[{"id":"A1"},{"id":"A2"}]}, 
{"id": "B","buttons":[{"id":"B1"},{"id":"B2"}]}] 

, которые я храню в $ scope.navigation, как это.

И, в идеале я хотел бы, чтобы произвести что-то вроде этого:

<span id="tabs"> 
    <div>A</div> 
    <div>B</div> 
</span> 

<span id="buttons"> 
    <div>A1</div> 
    <div>A2</div> 
    <div>B1</div> 
    <div>B2</div> 
</span> 

То, что я пытался это это

<span id="tabs"> 
    <div ng-repeat="tab in navigation">{{tab.id}}</div> 
</span> 

<span id="buttons"> 
    <span ng-repeat="tab in navigation"> 
     <div ng-repeat="button in tab.buttons">{{button.id}}</div> 
    </span> 
</span> 

Конечно, это не работает, как это создает дополнительный элемент диапазона, который отделяет кнопки в зависимости от вкладки, к которой они принадлежат. Есть ли способ сделать то, что мне нужно?

Спасибо!

Answer 1

Какова цель этого? A < div> внутри < span> считается плохой практикой, и я бы посоветовал вам поменять ваш CSS, если это необходимо. Возможно, это может быть хорошей аргументацией, но этот вопрос не дает достаточно подробностей для ответа.

И, придя к вашей проблеме выше, это может быть достигнуто путем создания другого массива, состоящего из таких кнопок, как показано ниже.

$scope.navigation= [{ "id": "A", "buttons": [{ "id": "A1" }, { "id": "A2" }] }, 
         { "id": "B", "buttons": [{ "id": "B1" }, { "id": "B2" }] }]; 

    $scope.buttons = []; 
    angular.forEach($scope.navigation, function (tab) { 
     angular.forEach(tab.buttons, function (button) { 
      $scope.buttons.push(button); 
     }); 
    }); 

и, наконец, использовать ng-repeat, как показано ниже.

<div> <div data-ng-repeat="button in buttons">{{button.id}}</div> </div> 

Answer 2

Вы должны сделать (ключ, значение) повтор после первого повтора в пролете:

<span id="buttons" ng-repeat="i in buttons"> 
    <div>{{i.id}}</div> 
</span> 


$scope.data = [{"id": "A","buttons":[{"id":"A1"},{"id":"A2"}]}, 
    {"id": "B","buttons":[{"id":"B1"},{"id":"B2"}]}] 
$scope.getButtons = function() { 
    $scope.buttons = [] 
    for (var i = 0; i < $scope.data.length; i++) { 
    for(var x = 0; x < $scope.data[i].buttons.length; x++) { 
     $scope.buttons.push($scope.data[i].buttons[x]) 
    } 
    } 
    console.log($scope.buttons) 
} 
$scope.getButtons(); 

Я обновил plunker так, чтобы он выравнивает кнопки массивы все в один новый массив.

Plunker Demo