creating table with two columns using ng-repeat

Question

I have an array of objects which I will need to display in a two column layout Some columns have more data than other columns currently, so I need equi height rows.

I used bootstrap to display the data but it doesn't have equi height rows. I also used clearfix but doesn't work.

<ng-include src="itemTemplateSrc" ng-repeat-start="tag in item.fields | filter:filterTagsByTagName" class="col-md-12"></ng-include>
<div class="clearfix" ng-if="$index%2===1"></div>
<div ng-repeat-end=""></div>

now I wanted to display the data in html with two column layout without splitting my array as I have filters as well.

How do I display the data from single object array in an HTML table.

how about using flex, to get equal rows. – alphapilgrim May 05 '16 at 15:26 — alphapilgrim, May 05 '16 at 15:26

score 3 · Answer 1 · answered May 08 '16 at 02:39

It is pretty straight forward if you think of the problem as 2 tables with a single column instead of 1 table with 2 columns- Use $odd and $even properties.

<div>
    <div class="col-md-6">
        <table class="table table-striped">
            <tbody>
                <tr ng-repeat="item in items">
                    <td ng-if="$even">...</td>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="col-md-6">
        <table class="table table-striped">
            <tbody>
                <tr ng-repeat="item in items">
                    <td ng-if="$odd">...</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

score 2 · Answer 2 · edited May 23 '17 at 11:33

Using an ng-repeat to display data within a table is as simple as just repeating a set of rows:

<table>
   <thead>
      <tr>
         <th>Name</th>
         <th>Age</th>
      </tr>
   </thead>
   <tbody>
      <!-- Now just ng-repeat the rows -->
      <tr ng-repeat="user in $ctrl.users">
         <td>{{user.name}}</td>
         <td>{{user.age}}</td>
      </tr>
   </tbody>
</table>

If you need to have all the row heights be equal, then you will need to use some CSS to accomplish that.

If you need them to all be the same height, based on the content within them, then you will need to use JavaScript.

Pratik Bhattacharya · Answer 3 · 2016-05-05T16:12:30.330

Take a look at this fiddler here.

Controller

function MyCtrl($scope) {
  $scope.name = 'Superhero';
  $scope.obj = ["data-1", "data-2", "data-3", "data-4"];
  $scope.arr = Array.apply(null, {
    length: $scope.obj.length/2
  }).map(Number.call, Number);
}

HTML

<div ng-controller="MyCtrl">
  <table>
  <tr ng-repeat="index in arr">
    <td>{{obj[index*2]}}</td>
    <td> {{obj[index*2+1]}}</td>
  </tr>
  </table>
</div>

Basically I have created an index array (of length half your actual array) and then used it create a table with 2 rows and extract item from your object.

EDIT With Filter Support

HTML

<div ng-controller="MyCtrl">
<input type="text" ng-model="filterText"/>
  <table>
  <tr ng-repeat="item in items = (obj | filter: filterText)" ng-show="$index < arrLength">
    <td>{{items[$index*2]}}</td>
    <td> {{items[$index*2+1]}}</td>
  </tr>
  </table>
</div>

Controller

function MyCtrl($scope) {
  $scope.name = 'Superhero';
  $scope.obj = ["data-1", "data-2", "data-3", "data-4"];
  $scope.arrLength = $scope.obj.length / 2;
  $scope.arr = Array.apply(null, {
    length: $scope.obj.length/2
  }).map(Number.call, Number);  
}

See the updated filter here.

It has support for basic filters.

Check my edit. I have modified the algorithm a little and have added support for basic filter. Using the same principal you can add custom filters as well. — Pratik Bhattacharya, May 05 '16 at 16:13

score 0 · Answer 4 · answered Oct 13 '16 at 13:11

It sounds like you might want to use a table. Tables will automatically make rows the same height.

I don't know if you mean you want every single row to be the same height, but using a table will at least make columns on the same row at the same height.

This also uses bootstrap classes. Stick this inside a div.row>div.col-##-xx and it should hopefully be what you want with a little styling.

Finally, I put an ng-if="vm.array[$index + 1]" on the second column. This will hide the last box in the table if you have an odd number of objects in your array

<div class="table-responsive">
      <table class="table table-striped">
        <tr ng-repeat="whatever in vm.array" ng-if="!($index % 2)">
          <td>
            {{vm.array[$index]}}
          </td>
          <td ng-if="vm.array[$index + 1]">
            {{vm.array[$index + 1]}}
          </td>
        </tr>
      </table>
    </div>

creating table with two columns using ng-repeat

4 Answers4