使用角度生成html表答案

【问题标题】：Generate html table using angular使用角度生成html表
【发布时间】：2015-09-04 22:35:23
【问题描述】：

我想使用 angular 生成 html 表。我有一个 json 对象，我使用 ng-repeat 添加多行。但是我的表结构不同。我想生成这样的表结构：

  <table>
    <tr>
     <td >ID</td>
     <td>Sub</td>
    </tr>
    <tr>
     <td rowspan="3">1</td>
     <td>S1</td>
    </tr>
    <tr>
     <td>S2</td>
    </tr>
    <tr>
     <td>S3</td>
    </tr> 
  </table>

 --------------
  ID  | subjects 
 --------------
      | S1
      --------  
   1  | S2  
      --------
      | S3  
 --------------
      | S4 
      -------- 
   2  | S5  
      --------
      | S6
 --------------

    user:[
    {id:1 , 
     subjects:[
       {id:1 , name:"eng"} 
       {id:2 , name:"phy"}
      ]
     },
    { id:2 , 
     subjects:[
       {id:1 , name:"eng"} 
       {id:3 , name:"math"}
     ]
    }
   ]

我的角码是：

      <tr ng-repeat = "user in users">
         <td>{{user.id}}</td>
         <td>{{user.subject}}</td>
      </tr>

我想知道如何生成像上面这样的表结构

【问题讨论】：

添加范围对象并在 html 表中使用 {{exampleObject.name}} 添加这些值
目前还不清楚在给定 json 的情况下您希望如何呈现表格。你能提供示例输出吗？
我已经编辑了我的问题。对于单个 ID，我想在主题列中添加多行。这就是我想要的@sfletche

标签： javascript json angularjs html

【解决方案1】：

类似于对象的嵌套结构，您可以像这样嵌套ng-repeats...

<tr ng-repeat = "user in users">
    <td>{{user.id}}</td>
    <td ng-repeat="subject in user.subjects">{{subject.name}}</td>
</tr>

【讨论】：

【解决方案2】：

在 $scope 中添加 users 对象。

$scope.users=[
    {id:1 , 
     subjects:[
       {id:1 , name:"eng"} 
       {id:2 , name:"phy"}
      ]
     },
    { id:2 , 
     subjects:[
       {id:1 , name:"eng"} 
       {id:3 , name:"math"}
     ]
    }
   ]

这里是html。

 <table border="1">
  <tr>
    <th> ID   </th>
    <th>  subjects </th>
  </tr>
<tr ng-repeat="user in users">
     <td>{{user.id}}</td>
     <td><table>
       <tr ng-repeat="subject in user.subjects">
         <td>{{subject.name}}</td>
       </tr>
     </table></td>
  </tr>
  </table>

这里是plunker

【讨论】：

对于单个 ID，我想在主题列中添加多行，而不仅仅是单个 td @RIYAJ KHAN

【解决方案3】：

在这里，我假设您希望 users 中的每个用户（在您的 JSON 对象中）在一个表中，因此您可以执行以下操作：

<table ng-repeat="user in users">
    <tr>
        <td>{{user.id}}</td>
        <td>Subjects</td>
    </tr>
    <tr ng-repeat="subject in user.subjects">
        <td>{{subject.id}}</td>
        <td>{{subject.name}}</td>
    </tr>
</table>

根据您的需要相应地调整html，但这是基本思想:)

希望这会有所帮助！

【讨论】：

【解决方案4】：

我拆分您的 JSON 并将其推送到两个 $scope 变量中，如下所示：

angular.forEach($scope.user, function(user) {
    $scope.userDetails.push({
      userId: user.id,
    });

    angular.forEach(user.subjects, function(subject) {
      $scope.subjectDetails.push({
        userId: user.id,
        subjectName: subject.name
      });
    });
});

在 HTML 中，我使用 filter 按用户 ID 进行过滤。

<table>
  <thead>
    <tr>
      <th style="width: 50px">ID</th>
      <th style="width: 75px">Subjects</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="user in userDetails">
      <td><span ng-bind="user.userId"></span>
      </td>
      <td>
        <table>
          <tr ng-repeat="sub in subjectDetails | filter: {userId: user.userId}">
            <td>
              <div ng-bind="sub.subjectName"></div>
            </td>
          </tr>
        </table>
      </td>
    </tr>
  </tbody>
</table>

这也是实现这一点的方法之一。

示例Plunker

【讨论】：

【解决方案5】：

您需要使用ng-repeat-start 和ng-repeat-end。例如：

var app = angular.module('MyApp', []);
app.controller('MyController', function ($scope) {

    var users = [{
        id: 1,
        subjects: [{
            id: 1,
            name: "eng"
        }, {
            id: 2,
            name: "phy"
        }]
    }, {
        id: 2,
        subjects: [{
            id: 1,
            name: "eng"
        }, {
            id: 3,
            name: "math"
        }]
    }];

    $scope.users = users;
});

table { border-collapse: collapse; }
td { border: 1px solid Black; }

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<table ng-app="MyApp" ng-controller="MyController">
    <thead>
        <tr>
            <td>ID</td>
            <td>Subjects</td>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat-start="user in users">
            <td rowspan="{{user.subjects.length+1}}">{{user.id}}</td>                    
        </tr>
        <tr ng-repeat-end ng-repeat="subject in user.subjects">
            <td>S{{subject.id}}</td>
        </tr>
    </tbody>
</table>

另外，在这里工作小提琴：http://jsfiddle.net/donal/r51d5fw5/17/

【讨论】：