如何使用AngularJS的ngRepeat指令从嵌套的JSON对象动态生成HTML表？

Question

I have to create a table as follows from a nested object. 我必须从嵌套对象创建表，如下所示。

JSON object : JSON对象：

{
    "A":{
        "1":"X",
        "2":"Y",
        "3":"Z"
    },
    "B":{
        "1":"P",
        "2":"Q",
        "3":"R"
    }
}

Desired Table : 所需表：

A: X|Y|Z
B: P|Q|R

HTML code : HTML代码：

    <!DOCTYPE html>
<html data-ng-app="myApp">
<body>

    <div ng-controller="GreetingController" >
        <div ng-repeat='(key,val) in arr'>{{temp(val)}} 
            <div ng-repeat='(nestedKey,nestedVal) in aux'>  
                {{nestedVal}}
            </div>
        </div>
    </div>
</body>

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script>
    var myApp = angular.module('myApp',[]);
    myApp.controller('GreetingController', ['$scope', function($scope) {
        $scope.arr={"A":{"1":"X","2":"Y","3",},"B":{"1":"P","2":"Q"}};
        $scope.temp = function(val)
        {
            console.log(val);
            $scope.aux = val;
        }
    }]);
</script>

I am unable to understand how and where to place the <table> , <tr> and <td> tags to be able to generate the table as describe. 我无法理解如何以及在何处放置<table> ， <tr>和<td>标记，以便能够按照描述生成表。

Answer 1

EDIT: 编辑：

tr is row and td is table cell tr是行， td是表单元格

<html data-ng-app="myApp">
<body>
    <div ng-controller="GreetingController" >
        <table>
            <tr ng-repeat='(key,val) in arr'>
                <td>
                    {{key}} 
                </td>
                <td ng-repeat='(nestedKey,nestedVal) in val'>  
                    {{nestedVal}}
                </td>
            </tr>
        </table>
    </div>
</body>

Answer 2

<div ng-controller="GreetingController" >
   <table>   
      <tr>
          <td><div ng-repeat='(key,val) in arr'>{{temp(val)}} </td>
      </tr>
      <tr><td> <div ng-repeat='(nestedKey,nestedVal) in aux'> </td> 
                 {{nestedVal}}
             </div>
      </tr>
        </div>
  </table>
 </div>

如何使用AngularJS的ngRepeat指令从嵌套的JSON对象动态生成HTML表？

问题描述

2 个解决方案

解决方案1
2 已采纳 2015-05-11 11:56:43

解决方案2
-1 2015-05-11 12:03:31

如何使用AngularJS的ngRepeat指令从嵌套的JSON对象动态生成HTML表？

问题描述

2 个解决方案

解决方案1 2 已采纳 2015-05-11 11:56:43

解决方案2 -1 2015-05-11 12:03:31

解决方案1
2 已采纳 2015-05-11 11:56:43

解决方案2
-1 2015-05-11 12:03:31