Geek Answers Handbook

How to make 2 columns with a table in angular

I have this code in an angular template that only makes the header on the left and the data on the right from top to 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 one field on one line, I want to have 2 fields on one line and a 3rd field and a 4th field on the second line, etc.

so i have an arrangement of two columns

  <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'}]

As a result i want

 <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 be done using hardcoded ng-repeat

+5
source share
2 answers

Here's the answer. I'm not sure that this is exactly what you want, but I think it is close: http://plnkr.co/edit/ADKu2WEb9TyvEXASOJyz?p=preview

Note that I use ng-repeat-start / ng-repeat-end to handle the multi-line thing you want to 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 is just a super simple module and 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]]; } });
+2
source

Hi, I tried, but you have to change your answer in the format below

 $scope.data = { data1: { id: 1, name: 'john', }, data2: { username: 'john', age: 20 } };

and you do not need a field variable

Below, how to repeat html in you, although I did not give you two columns

  <table class="table table-striped"> <tr ng-repeat="x in data"> <td ng-repeat="(key,val) in x">{{key}} : {{val}}</td> </tr> </table>
+1
source

More articles:


All Articles