Javascript 使用“重复”在一列中添加多行

Javascript 使用“重复”在一列中添加多行,javascript,json,angularjs,html,Javascript,Json,Angularjs,Html,我想使用json对象生成表内容。我使用ng repeat在表中插入多行。但我必须生成如下所示的表 -------------- ID | subjects -------------- | S1 1 | S2 | S3 -------------- | S4 2 | S5 | S6 -------------- my angular code is:

我想使用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>
我想像这样生成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.
S1
S2
S3

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

使用
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>S{{subject.id}}</td>
</tr>
表{边框折叠:折叠;}
td{边框:1px纯黑色;}

身份证件
学科
{{user.id}
S{{subject.id}

行span
将完成您需要的一切。请点击此链接:


这是web开发的最佳资源之一。

使用div u也可以

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

{{user.id}
{{user1.id}:{{user1.name}
多纳尔的回答很好。 但我编辑以显示漂亮的表格:

<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>S{{subject.id}}</td>
        <td>{{subject.name}}</td>
    </tr>
</tbody>

身份证件
学科
名称
密钥{{user.id}
S{{user.subjects[0].id}
{{user.subjects[0].name}
S{{subject.id}
{{subject.name}

rowspan将如何迭代user.subjects中的主题?;-)
rowspan
单击标签并使用Angular迭代主题<代码>行span只是布局。你也可以用我上面的答案。不,我只是弄乱了你的用词。因为rowspan没有做他要求帮助的所有事情。如果他将用户嵌套,也不必使用rowspan。subjects迭代在一个单独的td中(根据他的问题是他想要实现什么)@msines关于rowspan是正确的。如果我将id的列rowspan设置为我的subjects length,然后在td中添加多行,我尝试了,但没有成功。它会起作用,但是@Donal的答案更容易编码。我会坚持下去。严格使用表格会有点复杂。谢谢你的回答,我已经编辑了我的问题,并解释了我想要生成什么样的html表格。您在td中添加div,但我想在td中添加行@Donal@AminaYousuf好的,我可以使用ng repeat start和ng repeat end实现您想要的。我不想添加div,我想先在td@flashFlatte数组中添加行,然后在展平的数组上运行中继器。
<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>S{{subject.id}}</td>
        <td>{{subject.name}}</td>
    </tr>
</tbody>