循环中的JSON循环，用Angular渲染父元素和子元素

JSON loop within a loop to render parent and child elements with Angular

本文关键字：循环 元素 Angular JSON      更新时间：2023-09-26

我正试图根据我从服务器的响应创建一个用户界面。我需要循环得到关于制表符创建然后循环得到内容的关于放入制表符。我得到了正确数量的制表符，但不是正确数量的输入。我的JSON如下:

{
    "data": {
        "APIVersion": "2.0",
        "toplevelcontainer": [
            {"label": "value1", "type": "tabs", "key": "value1", "tooltip": "value1", "defaultValue": "value1",
               "content" : {
                    "innercontent": [
                        {"label": "tab1", "type": "input", "key": "value1","tooltip": "value1","defaultValue": "value1"},
                        {"label": "tab1", "type": "input", "key": "value1","tooltip": "value1","defaultValue": "value1"},
                        {"label": "tab1", "type": "input", "key": "value1","tooltip": "value1","defaultValue": "value1"},
                        {"label": "tab1", "type": "input", "key": "value1","tooltip": "value1","defaultValue": "value1"}
                    ]
                }
            },
            {"label": "value2", "type": "tabs", "key": "value2", "tooltip": "value2", "defaultValue": "value2",
                "content" : {
                    "innercontent": [
                        {"label": "tab2", "type": "input", "key": "value2","tooltip": "value2","defaultValue": "value2"}
                    ]
                }
            },
            {"label": "value3", "type": "tabs", "key": "value3","tooltip": "value3","defaultValue": "value3",
                "content" : {
                    "innercontent": [
                        {"label": "tab2",  "type": "input", "key": "value2","tooltip": "value2","defaultValue": "value2"}
                    ]
                }
            }
        ]
    }
}

现在我的问题是我是否应该使用angular。forEach还是ng-repeat?我的forEach循环是这样的:

angular.forEach(data.data, function(top) {
  $scope.containers = top;
    angular.forEach(data.data.toplevelcontainer, function(lower) {
        $scope.inputs = lower;
    })
});

UPDATE: with ng-repeat methodapp.controller('TabController'， function($scope， $http){

$http.get('data.json')
.success(function(data) {
    $scope.containers = data.data.toplevelcontainer;
    $scope.inputs = data.data.toplevelcontainer.content; //do I need to create a scope variable for each of these items I want to insert into the DOM?
})

这是一个使用提供的数据的非常原始的工作选项卡系统。

app.controller('MainCtrl', function($scope, $http) {
  $scope.model = {};// add model properties to this object to prevent child scope issues
  $http.get('data.json').then(function(resp) {
    $scope.data = resp.data.data
  })
});
HTML 

<!-- Tabs -->
<ul>
   <li ng-repeat="tab in data.toplevelcontainer" ng-click="model.activeTab=tab">{{tab.label}} - Click me</li>
</ul>
<!-- Content-->  
<div ng-repeat="tab in data.toplevelcontainer" ng-if="model.activeTab == tab">
   <ul>
      <li ng-repeat="sub_tab in tab.content.innercontent">{{sub_tab.label}}</li>
   </ul>
</div>
演示

您不需要在作用域中创建变量来使用嵌套的ng-repeat。你可以这样做:

<div ng-repeat="item in data.toplevelcontainer">
    {{item.label}}
    <div ng-repeat="content in item.content.innercontent">
        {{content.label}}
    </div>
</div>
相关文章：