使用角度 ng-repeat 在一列中添加多行

Posted 2023-03-05

【中文标题】使用角度 ng-repeat 在一列中添加多行

【英文标题】：add multiple rows in one column using angular ng-repeat

【发布时间】：2015-09-04 01:50:18

【问题描述】：

我想使用 json 对象生成表格内容。我正在使用 ng-repeat 在表中插入多行。但我必须生成如下表。

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


my angular code is: 
 <tr ng-repeat = "user in users">
    <td>user.id</td>
    <td>user.subject</td>
</tr>

我的 json 对象是：

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

我想生成这样的html表格

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

如何使用角度在一列中插入多行

【问题讨论】：

先展平阵列，然后在展平阵列上运行中继器。

【参考方案1】：

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

<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>Ssubject.id</td>
</tr>

这是一个完整的例子：

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"
        , 
            id: 4,
            name: "hist"
        , 
        
            id: 5,
            name: "geog"
        ]
    ];

    $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>Ssubject.id</td>
        </tr>
    </tbody>
</table>

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

使用嵌套ng-repeat 的替代版本可以使用div 来实现以显示嵌套主题信息：

<tr ng-repeat="user in users">
    <td>user.id</td>
    <td>
        <div ng-repeat="subject in user.subjects">Ssubject.id</div>
    </td>
</tr>

【讨论】：

感谢您的回答我已经编辑了我的问题并解释了我想要生成什么样的 html 表。您在 td 中添加 div 但我想在 td @Donal 中添加行

@AminaYousuf 好的，我能够使用 ng-repeat-start 和 ng-repeat-end 实现您想要的。

【参考方案2】：

rowspan 会做你需要的一切。请点击此链接：

w3schools这是最好的网络开发资源之一。

【讨论】：

rowspan 将如何遍历 user.subjects 中的主题？ ;-)

rowspan 标签并使用 Angular 遍历主题。 rowspan 只是布局。您也可以使用我上面的答案。

不，我只是在弄乱你的选择。由于rowspan没有做他要求帮助的所有事情。如果他将 user.subjects 迭代嵌套在 1 个 td 中，也没有必要使用 rowspan（根据他的问题是他想要实现的目标）

@msinnes 对 rowspan 的看法是正确的。如果我将 id 的列 rowspan 设置为我的主题长度，然后在 td 中添加多行，我尝试过但无法做到。

它会起作用，但@Donal 的答案更容易编码。我会坚持下去。严格地用一张桌子来做会有点复杂。

【参考方案3】：

使用div你也可以做到

<div ng-repeat = "user in users">
<div> user.id </div>
  <div ng-repeat = "user1 in users.subjects">
     user1.id : user1.name
  <div>
</div>

【讨论】：

我不想添加 div 我想在 td @Flash 中添加行

【参考方案4】：

Donal 的回答很好。 但我编辑显示漂亮的表格：

<table class="table table-bordered table-hover table-height m-b-xs">
<thead>
    <tr>
        <td>ID</td>
        <td>Subjects</td>
        <td>name</td>
    </tr>
</thead>
<tbody>
    <tr ng-repeat-start="user in users">
        <td rowspan="user.subjects.length">key user.id</td>
        <td>S user.subjects[0].id </td>
        <td> user.subjects[0].name </td>
    </tr>
    <tr ng-repeat-end ng-repeat="subject in user.subjects.slice(1)">
        <td>Ssubject.id</td>
        <td>subject.name</td>
    </tr>
</tbody>