CODEWITHSUNDEEP
angularjshtmltwitter-bootstrapcss
Shashi
Shashi

Reputation: 1182

creating table with two columns using ng-repeat

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.

Upvotes: 2

Views: 8749

Answers (4)

zatchgordon
zatchgordon

Reputation: 1

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>

Upvotes: 0

Raj
Raj

Reputation: 31

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>

Upvotes: 3

Pratik Bhattacharya
Pratik Bhattacharya

Reputation: 3746

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.

Upvotes: 1

Josh
Josh

Reputation: 44916

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.

Upvotes: 2

Related Questions