JSON応答データをテーブルに表示したい。スキーマは事前にわかっておらず、JSONには最大で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)">
<div ng-switch-when="object">
obj: {{value}}
</div>
<div ng-switch-default>{{value}}</div>
</td>
</tr>
</table>ここで、プロパティ "c"に対して、次のようなネストされたテーブルを作成します。
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>これを試して。
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>この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加