Question

我正在尝试根据来自服务器的响应创建用户界面。我需要循环以获取选项卡的大概创建然后循环以获取要放入选项卡内容的内容。我得到了适量的标签但没有适量的输入。我的JSON是这样的：

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

现在我的问题是我应该使用angular.forEach还是ng-repeat？我的forEach循环看起来像这样：

$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?
})

更新：使用ng-repeat方法 app.controller（＆＃39; TabController＆＃39;，函数（$ scope，$ http）{

view.isPressed

Answer 1

您不需要在示波器上创建变量以使用嵌套的ng-repeat。你可以这样做：

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

Answer 2

这是一个使用所提供数据的非常原始的工作标签系统。

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

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

2 个答案: