使用角度 ng 重复在一列中添加多行
add multiple rows in one column using angular ng-repeat
我想使用 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>
如何使用角度在一列中插入多行
使用 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>
下面是一个完整的示例:
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/
使用嵌套ng-repeat
的替代版本可以使用div
来显示嵌套的主题信息:
<tr ng-repeat="user in users">
<td>{{user.id}}</td>
<td>
<div ng-repeat="subject in user.subjects">S{{subject.id}}</div>
</td>
</tr>
rowspan
将做你需要的一切。点击此链接:
w3schools 这是 Web 开发的最佳资源之一。
使用div 你也可以做
<div ng-repeat = "user in users">
<div> {{user.id}} </div>
<div ng-repeat = "user1 in users.subjects">
{{user1.id}} : {{user1.name}}
<div>
</div>
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>S{{subject.id}}</td>
<td>{{subject.name}}</td>
</tr>
</tbody>
相关文章:
- 柱状图后面的一列
- 数据表通过分析一列的值对其进行排序
- Datatables-如何在未显示所有列的情况下禁用表中最后一列的排序
- 获取表中每行的一列的内容,然后循环访问每个内容
- 对象数组-与其他列数据相比,增加一列
- 在最初的查询/表格绘制中只提取谷歌电子表格的一列
- jQuery Datatables:单击一列时对另一列进行排序
- 我的砖石图像只显示在一列中
- 删除“;使用javascript从pentaho中的一列中选择“[”
- 使用 Javascript 在一列中更改属性内容
- jquery插件 - 已选择 - 多项选择不在一行中列出,而是列在一列中
- 将索引列添加到数据表
- jqGrid如何将多个复选框添加到一列中
- 如何将数组添加到对象中,但为每个数组元素过滤掉除一列之外的所有列
- jQuery 为每行的下一列添加附加值
- 有没有办法在不使用循环的情况下更新多个文档以将特定数字添加到一列
- 在JQGrid中的一列中添加一个超链接,单击“超链接”将调用Jquery函数
- 如何用Javascript为图表中的每一列添加更多的href元素
- 为jqgrid的每一列添加过滤器
- 使用角度 ng 重复在一列中添加多行