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.Folder = [];
angular.forEach($scope.data, function(choose) {
   if(choose && choose.Folder){
       $scope.Folder.push(choose.Folder);
   }
})

Answer 2

您需要在控制器中使用$scope.data[0].Folder，因为$scope.data是一种数组类型。而且我不确定你是如何渲染你的表格的，但问题只与获取$scope.Folder中的值有关，这是你的解决方案。

＆＃13;

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);
    });

}

＆＃13;

<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>

＆＃13;

这是我认为是你期待的另一个例子

＆＃13;

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);
    });

}

＆＃13;

<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>

＆＃13;

Answer 3

您正在访问$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 4

您可以尝试以下

<div ng-repeat="item in data">
  <div ng-repeat="g in item.Folder">
    Name:{{g.Name}}-
    Cpu:{{g.CPU}}-
    Ram:{{g.RAM}}
  </div>
</div>

使用上述方法将无需在控制器中准备数据

Demo

<强> Table Demo

Answer 5

您需要做的就是更新迭代器功能从 angular.forEach($scope.data.Folder, function(choose) 至 angular.forEach($scope.data[0].Folder, function(choose)

看看你的json文件夹是第一个元素......

以表格角度显示来自JSON的嵌套数据

5 个答案: