使用角度ng-repeat在一列中添加多行 [英] add multiple rows in one column using angular ng-repeat

问题描述

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

I want to generate table contents using json object. I am using ng-repeat to insert multiple rows in a table. But I have to generate table like the following.

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

I want to generate html table like this

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

如何使用angular

how to insert multiple rows in one column using 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>

以下是一个完整的例子：

Here is a full example:

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

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

Also, working fiddle here: http://jsfiddle.net/donal/r51d5fw5/17/

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

An alternative version, using nested ng-repeat, can be implemented using a div to display the nested subject information:

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

这篇关于使用角度ng-repeat在一列中添加多行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！