html - How can make 2 columns with table in angular -
i have code in angular template makes header on left , data on right top bottom.
<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> but instead of 1 field in 1 row want have 2 fields in 1 row , 3rd field , 4th field in second row , on.
so have 2 columns layout
<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'}] the result want is
<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> this should done ng-repeat rather hard coding stuff
here's answer. i'm not sure it's want think comes close: http://plnkr.co/edit/adku2web9tyvexasojyz?p=preview
note i'm using ng-repeat-start/ng-repeat-end handle multi-line thing want do:
<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> the rest super simple module , controller:
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]]; } });
Comments
Post a Comment