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>

当然这不起作用，因为它创建了一个额外的span元素，根据它们所属的标签分隔按钮。有办法做我需要的吗？

谢谢！

Answer 1

在跨度中的初始重复之后，您必须重复（键，值）重复：

<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

Answer 2

它的目的是什么？ A＆lt; DIV＆GT;在一个＆lt;跨度＆GT;被认为是不好的做法，我建议你在适当的时候改变你的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>

Angularjs中的嵌套ng-repeat显示在同一级别

2 个答案: