如何使用AngularJS的ngRepeat指令從嵌套的JSON對象動態生成HTML表？

Question

我必須從嵌套對象創建表，如下所示。

JSON對象：

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

所需表：

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

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>

我無法理解如何以及在何處放置<table> ， <tr>和<td>標記，以便能夠按照描述生成表。

Answer 1

編輯：

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