How can make 2 columns with table in angular

Question

I have this code in angular template which just makes the header on left and data on 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 in one row i want to have 2 fields in one row and 3rd field and 4th field in second row and so on.

so that i 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 i 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 be done with ng-repeat rather hard coding stuff

@user3214546 cna you please explain it with an example ? or show us something that you are expectng :) — squiroid
– squiroid, Commented Jun 20, 2015 at 10:53

John Munsch · Accepted Answer · 2015-06-20 12:28:05Z

2

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

Note that I'm using 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]];
    }
  });

answered Jun 20, 2015 at 12:28

John Munsch

19.5k8 gold badges45 silver badges74 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user3214546 Over a year ago

Its not working for me . will this work for any number of fields or you have hard coded 1,2,3,4 fields only

John Munsch Over a year ago

@user3214546 Yes, it's hard coded to four fields, you didn't say anything about varying numbers of fields. You could have a two ng-repeats inside of the other one. One going over the first half of the fields [ 0 to (n / 2) - 1] and the second over fields [ (n / 2) to (n - 1) ]. However, you'd better always have an even number of fields or your table formatting will be wonky (three fields on one row and only two on the next). Also, the view is starting to get a little complicated with logic and you might want to consider pulling some of that out into directives to simplify it.

Siddharth Pandey · Accepted Answer · 2015-06-20 12:00:48Z

1

Hi I tried but you have to change your response into below format

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

and you don't need field variable

Below is how to have to repeat in you html although I haven't given you on 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>

edited Jun 20, 2015 at 12:00

answered Jun 20, 2015 at 10:48

Siddharth Pandey

6691 gold badge9 silver badges21 bronze badges

7 Comments

squiroid Over a year ago

@Anyone who gave him negative don't discourage a person who just stated stackoverflow. Yeah I know his answer is not right but atleast he tried. :)

Siddharth Pandey Over a year ago

@squiroid I may understood the question wrong but my answer is working Thanx for support

m4n0 Over a year ago

@siddharthPandey I think he wanted one more field in a row. So somebody down voted this.

Siddharth Pandey Over a year ago

if you want to use key value both to be printed use below ng-repeat="(key,val) in data"

Siddharth Pandey Over a year ago

@ManojKumar Yeah I have checked now and edited the post, I think my new answer will help him please vote up i m not able to post answers anymore on stackover flow

|

Collectives™ on Stack Overflow

How can make 2 columns with table in angular

2 Answers 2

2 Comments

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related