JSON循环内循环呈现父母和子元素与角

-2

我想创建一个用户界面基于我从服务器的响应。我需要循环才能获取关于制表符的信息，然后循环获取关于将内容放入制表符的信息。我得到适量的选项卡，但没有正确的输入量。我的JSON是这样的：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：与NG重复方法 app.controller（ 'TabController'，函数（$范围，$ 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? 
})

来源

2015-10-06 pcproff

是foreach循环被覆盖在每次迭代变量。应该可以使用'ng-repeat'来创建你的标签和内容...不知道为什么你需要先计算它们 – charlietfl

我不确定我是否每个都需要一个。我是否必须为每个要插入的项目创建$ scope.variable？ – pcproff

假设它从数据显示所有流...可能不是 – charlietfl

-1

下面是使用提供的数据非常原始的工作标签系统

。

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>

DEMO

来源

2015-10-06 21:39:20 charlietfl

charlietfl你能详细说明你使用'$ scope.model = {}'的原因吗？ – pcproff

我用一个非常简单的clcik事件来设置'activeTab'，但'ng-repeat'创建子范围......所以通过添加'model'对象它可以确保继承所有的子范围。这是很多人学习角度的基本问题 – charlietfl

-1

你不需要在范围创建变量使用嵌套NG-重复你可以这样做：

<div ng-repeat="item in data.toplevelcontainer"> 
    {{item.label}} 
    <div ng-repeat="content in item.content.innercontent"> 
     {{content.label}} 
    </div> 
</div>

来源

2015-10-06 21:23:38 Mike

但是，'item'和'content'是在哪里声明的？ – pcproff

它们在由ng-repeat指令创建的新范围中声明。把它想象成每个循环：foreach（data.toplevelcontainer中的var item）{...} – Mike

JSON循环内循环呈现父母和子元素与角

回答

相关问题