[英]Multi-line table rows using angular
我正在使用angular.js制作这样的表:
<table>
<tr ng-repeat="order in orders">
<td>
{{order.custName}} ...(several columns)
</td>
</tr>
</table>
我想为每个订单添加第二行,因此表看起来像这样:
order1ID order1Name order1Amnt
order1Comment
order2ID order2Name order2Amnt
order2Comment
order3ID order3Name order3Amnt
order3Comment
但是我不知道怎么做!
我创建了一个有效的CodePen示例来解决此问题。
相关HTML:
<section ng-app="app" ng-controller="MainCtrl">
<table class="table table-bordered">
<thead>
<tr>
<th>Order ID</th>
<th>Order Name</th>
<th>Order Amount</th>
</tr>
</thead>
<tbody ng-repeat="order in orders">
<tr>
<td>{{order.id}}</td>
<td>{{order.name}}</td>
<td>{{order.amount}}</td>
</tr>
<tr>
<td colspan="3">
{{order.comment}}
</td>
</tr>
</tbody>
</table>
</section>
相关的javascript:
var app = angular.module('app', []);
app.controller('MainCtrl', function($scope) {
$scope.orders = [{
id: '001',
name: 'Order 1 Name',
amount: 100.00,
comment: 'Order 1 comment goes here'
},{
id: '002',
name: 'Order 2 Name',
amount: 150.00,
comment: 'Order 2 comment goes here'
}];
});
使用Angular 1.2:
<table>
<tr ng-repeat-start="x in stuff">
<td>{{x.name}}</td>
</tr>
<tr ng-repeat-end="">
<td>{{x.value}}</td>
</tr>
</table>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.