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

时间：2021-08-22 20:33:35

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.

我无法理解如何以及在何处放置

, 和
标签以便能够按描述生成表。

2 个解决方案

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

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

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

#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>
标签：

相关文章