use*_*546 5 html css twitter-bootstrap angularjs
我在角度模板中有这个代码,它只是左边的标题和从上到下的数据.
<div class="panel-body">
<table class="table table-striped">
<tr ng-repeat="f in fields">
<th>{{ f }}</th>
<td>{{ data[f] }}</td>
</tr>
</table>
</div>
但是,不是一行中的一个字段,而是希望在一行中有2个字段,在第二行中有第3个字段,第4个字段,依此类推.
所以我有2列布局
<tr><th>{{ f }}</th>
<td>{{ data[f] }}</td>
<th>{{ f }}</th>
<td>{{ data[f] }}</td>
</tr>
field = ['id', 'name', 'username', 'email', 'age']
data = [{id:1, name: 'john', username: 'john', age: 20, email: 'test'}]
我想要的结果是
<tr><td>id:</td><td>1</td><td>name:</td><td>john</td></tr>
<tr><td>username:</td><td>john</td><td>age:</td><td>20</td></tr>
这应该用ng-repeat而不是硬编码来完成
这是一个答案。我不确定这正是您想要的，但我认为它很接近：http://plnkr.co/edit/ADKu2WEb9TyvEXASOJyz?p =preview
请注意，我使用 ng-repeat-start/ng-repeat-end 来处理您想要执行的多行操作：
<body ng-app="example" ng-controller="ExampleController">
<table>
<tr ng-repeat-start="row in data">
<td>{{ label(0) }}:</td>
<td>{{ value(row, 0) }}</td>
<td>{{ label(1) }}:</td>
<td>{{ value(row, 1) }}</td>
</tr>
<tr ng-repeat-end>
<td>{{ label(2) }}:</td>
<td>{{ value(row, 2) }}</td>
<td>{{ label(3) }}:</td>
<td>{{ value(row, 3) }}</td>
</tr>
</table>
</body>
剩下的只是一个超级简单的模块和控制器：
angular.module('example', [])
.controller('ExampleController', function ($scope) {
var fields = [ 'id', 'name', 'username', 'email', 'age' ];
$scope.data = [{id:1, name: 'john', username: 'john', age: 20, email: 'test'}];
$scope.label = function (fieldNumber) {
return fields[fieldNumber];
};
$scope.value = function (row, fieldNumber) {
return row[fields[fieldNumber]];
}
});
| 归档时间： |
|
| 查看次数： |
3003 次 |
| 最近记录： |