html – 如何使用角度表制作2列
发布时间:2020-12-14 23:26:45 所属栏目:资源 来源:网络整理
导读:我在角度模板中有这个代码,它只是左边的标题和从上到下的数据. 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个
我在角度模板中有这个代码,它只是左边的标题和从上到下的数据.
<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','age' ]; $scope.data = [{id:1,email: 'test'}]; $scope.label = function (fieldNumber) { return fields[fieldNumber]; }; $scope.value = function (row,fieldNumber) { return row[fields[fieldNumber]]; } }); (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |