Как создать вложенные таблицы с помощью AngularJS?

Question

Я хочу отображать данные ответа JSON в таблице. Схема не известна заранее, и JSON может содержать не более одного вложенного объекта. Этот пример показывает таблицу, которая отображает пары ключ-значение:

function TestController($scope) { 
 
    $scope.data = { 
 
    a: 42, 
 
    b: "test", 
 
    c: { 
 
     x: -1, 
 
     y: 1 
 
    } 
 
    }; 
 

 
    $scope.getTypeOf = function(obj) { 
 
    return typeof obj; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<table ng-app="" ng-controller="TestController" border="1"> 
 
    <tr ng-repeat="(key, value) in data"> 
 
    <td>{{key}}</td> 
 
    <td ng-switch on="getTypeOf(value)"> 
 
     <div ng-switch-when="object"> 
 
     obj: {{value}} 
 
     </div> 
 
     <div ng-switch-default>{{value}}</div> 
 
    </td> 
 
    </tr> 
 
</table>

Теперь, для свойства «с», я хочу, чтобы создать вложенную таблицу, как это:

function TestController($scope) { 
 
    $scope.data = { 
 
    a: 42, 
 
    b: "test", 
 
    c: { 
 
     x: -1, 
 
     y: 1 
 
    } 
 
    }; 
 

 
    $scope.getTypeOf = function(obj) { 
 
    return typeof obj; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<table ng-app="" ng-controller="TestController" border="1"> 
 
    <tr ng-repeat="(key, value) in data"> 
 
    <td>{{key}}</td> 
 
    <td ng-switch on="getTypeOf(value)"> 
 
     <div ng-switch-when="object"> 
 
     <tr ng-repeat="(key1, value1) in value"> 
 
      <td>{{key1}}</td> 
 
      <td>{{value1}}</td> 
 
     </tr> 
 
     </div> 
 
     <div ng-switch-default>{{value}}</div> 
 
    </td> 
 
    </tr> 
 
</table>

Интуитивно это должно работать, но оно выбрасывает Error: $compile:ctreq Missing Required Controller в Chrome. Как я могу достичь правильного поведения?

Answer 1

попробуйте это.

function TestController($scope) { 
 
    $scope.data = { 
 
    a: 42, 
 
    b: "test", 
 
    c: { 
 
     x: -1, 
 
     y: 1 
 
    } 
 
    }; 
 

 
    $scope.getTypeOf = function(obj) { 
 

 
    return typeof obj; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<table ng-app="" ng-controller="TestController" border="1"> 
 
    <tr ng-repeat="(key, value) in data"> 
 
    <td>{{key}}</td> 
 
    <td ng-switch on="getTypeOf(value)"> 
 
     <table ng-switch-when="object" border="1"> 
 
     <tr ng-repeat="(key1, value1) in value"> 
 
      <td >{{key1}}</td> 
 
      <td >{{value1}}</td> 
 
     </tr> 
 
     </table> 
 
     <div ng-switch-default>{{value}}</div> 
 
    </td> 
 
    </tr> 
 
</table>

Answer 2

То, как вы определили свой контроллер, неверно.

Вам нужно что-то вроде

angular.module('app').controller("TestController", ['$scope', 
    function($scope){ 
    // your controller code 
    } 
]); 

Answer 3

value на ng-switch-when="object" является объект массива. вам нужно использовать Object.keys для извлечения ключей объектов, а затем вы можете прочитать каждый из них и построить свой keyvalue стол