![](/img/trans.png)
[英]How to convert table row data into multiple rows for mobile resolution while using ng-repeat in angular?
[英]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>
如何使用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>
這是一個完整的例子:
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>
唐納德的答案很好。 但我編輯顯示漂亮的表:
<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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.