表角显示JSON中的嵌套数据

Question

我试图在表中显示来自JSON的嵌套数据，但没有成功。

我的json数据：-

$scope.data = [
{
    "$id": "1",
    "Folder": [
        {
            "Name": "Windows-Desktop",
            "CPU": "2",
            "RAM": 2,
            "FolderName": "Folder-28"
        },
         {
            "Name": "Desktop",
            "CPU": "1",
            "RAM": 1,
            "FolderName": "Folder-11"
        }
        ]
}
]

我在控制器上试过这个：-

$scope.Folder = [];
  angular.forEach($scope.data.Folder, function(choose) {
      $scope.Folder.push(choose);
 }

在视图中，我这样做了

<tbody>
    <tr role="row" class="odd">
        <td class="sorting_1" ng-repeat="g in Folder">{{g.Name}}</td>
        <td>
            <div ng-repeat="g in Folder">
            <input class="form-control" type="text">{{g.CPU}}</input>
            </div>
        </td>
        <td>
            <div ng-repeat="g in Folder">
            <input class="form-control" type="text">{{g.RAM}}</input>
            </div>
        </td>
    </tr>
</tbody>

我在这方面没有任何成果。我哪里出问题了？

Answer 1

您正在访问$scope.data.Folder，这是不正确的，因为$scope.data是数组。

首先尝试在$scope.data上循环，然后在Folder上循环

$scope.Folder = [];
  angular.forEach($scope.data, function(choose) {
     if(choose && choose.Folder && choose.Folder.length) {
       angular.forEach(choose.Folder, function(choose1) {
         $scope.Folder.push(choose1);
        }
     }

 }

Answer 2

在您的控制器中，请这样做：

$scope.Folder = [];
angular.forEach($scope.data, function(choose) {
   if(choose && choose.Folder){
       $scope.Folder.push(choose.Folder);
   }
})

Answer 3

您需要在控制器中使用$scope.data[0].Folder，因为$scope.data是数组类型。我不知道您是如何呈现您的表的，但由于问题仅与在$scope.Folder中获取值有关，这是您的解决方案。

​

var myApp = angular.module('myApp', []);

//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});

function MyCtrl($scope) {
    $scope.data = [
      {
        "$id": "1",
        "Folder": [
          {
              "Name": "Windows-Desktop",
              "CPU": "2",
              "RAM": 2,
              "FolderName": "Folder-28"
          },
           {
              "Name": "Desktop",
              "CPU": "1",
              "RAM": 1,
              "FolderName": "Folder-11"
          }
        ]
      }
    ];
    $scope.Folder = [];
      angular.forEach($scope.data[0].Folder, function(choose) {
      $scope.Folder.push(choose);
    });

}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
 <tbody>
    <tr role="row" class="odd">
        <td class="sorting_1" ng-repeat="g in Folder">{{g.Name}}</td>
        <td>
            <div ng-repeat="g in Folder">
            <input class="form-control" type="text" />{{g.CPU}}
            </div>
        </td>
        <td>
            <div ng-repeat="g in Folder">
            <input class="form-control" type="text" />{{g.RAM}}
            </div>
        </td>
    </tr>
</tbody>
</div>

​

这里还有一个例子，我认为这是你所期待的

​

var myApp = angular.module('myApp', []);

//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});

function MyCtrl($scope) {
    $scope.data = [
      {
        "$id": "1",
        "Folder": [
          {
              "Name": "Windows-Desktop",
              "CPU": "2",
              "RAM": 2,
              "FolderName": "Folder-28"
          },
           {
              "Name": "Desktop",
              "CPU": "1",
              "RAM": 1,
              "FolderName": "Folder-11"
          }
        ]
      }
    ];
    $scope.Folder = [];
      angular.forEach($scope.data[0].Folder, function(choose) {
      $scope.Folder.push(choose);
    });

}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
  <table border='1'>
   <tr>
    <th>Name</th>
    <th>CPU</th>
    <th>RAM</th>
   </tr>
   <tr ng-repeat = "g in Folder">
    <td>{{g['Name']}}</td>
    <td>{{g['CPU']}}</td>
    <td>{{g['RAM']}}</td>
   </tr>
  </table>
</div>

​