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循環內循環呈現父母和子元素與角

回答

相關問題