Generating a table with two columns utilizing ng-repeat

Question

Generating a table with two columns utilizing ng-repeat

I am currently dealing with an array of objects that I need to showcase in a two-column layout. The challenge arises because some columns have more data than others, requiring equi-height rows.

Despite utilizing Bootstrap and clearfix in my attempts to display the data, I have not been able to achieve equi-height rows.

<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>

My goal now is to present the data in HTML using a two-column layout without splitting the array due to additional filters.

How can I effectively showcase the data from a single object array in an HTML table?

angularjs html twitter-bootstrap css

Answer 1

Answer №1

If you approach the issue as 2 tables with a single column rather than 1 table with 2 columns, it becomes much simpler to solve. Utilize the $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>

Answer 2

If you approach the issue as 2 tables with a single column rather than 1 table with 2 columns, it becomes much simpler to solve. Utilize the $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>

Answer 3

Answer №2

Displaying data in a table using ng-repeat is quite straightforward. Simply repeat a set of rows:

<table>
   <thead>
      <tr>
         <th>Name</th>
         <th>Age</th>
      </tr>
   </thead>
   <tbody>
      <!-- Use ng-repeat for each row -->
      <tr ng-repeat="user in $ctrl.users">
         <td>{{user.name}}</td>
         <td>{{user.age}}</td>
      </tr>
   </tbody>
</table>

If you want all row heights to be equal, CSS can help achieve that.

For equal height based on content within the rows, JavaScript will be necessary.

Answer 4

Displaying data in a table using ng-repeat is quite straightforward. Simply repeat a set of rows:

<table>
   <thead>
      <tr>
         <th>Name</th>
         <th>Age</th>
      </tr>
   </thead>
   <tbody>
      <!-- Use ng-repeat for each row -->
      <tr ng-repeat="user in $ctrl.users">
         <td>{{user.name}}</td>
         <td>{{user.age}}</td>
      </tr>
   </tbody>
</table>

If you want all row heights to be equal, CSS can help achieve that.

For equal height based on content within the rows, JavaScript will be necessary.

Answer 5

Answer №3

Check out 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>

I've created an index array based on half the length of your original array to generate a table with extracted items 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);  
}

View the updated filter here.

This version includes support for basic filters.

Answer 6

Check out 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>

I've created an index array based on half the length of your original array to generate a table with extracted items 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);  
}

View the updated filter here.

This version includes support for basic filters.

Answer 7

Answer №4

If you're looking to ensure uniform row height, consider using a table. Tables automatically align row heights.

It's unclear if you want each individual row to be the same height, but utilizing a table will at least align columns on the same row.

This solution incorporates bootstrap classes. Place this code within a div.row>div.col-##-xx structure for the desired result with some additional styling.

To address odd numbers of objects in your array, I included an ng-if="vm.array[$index + 1]" on the second column to hide the last box in the table.

<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>

Answer 8

If you're looking to ensure uniform row height, consider using a table. Tables automatically align row heights.

It's unclear if you want each individual row to be the same height, but utilizing a table will at least align columns on the same row.

This solution incorporates bootstrap classes. Place this code within a div.row>div.col-##-xx structure for the desired result with some additional styling.

To address odd numbers of objects in your array, I included an ng-if="vm.array[$index + 1]" on the second column to hide the last box in the table.

<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>

Generating a table with two columns utilizing ng-repeat

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Generate interactive jQuery slideToggle containers that monitor user clicks via Google Analytics

Utilizing JSON for HTML conversion in Codeigniter

React and Material UI: troubleshooting problems with layout columns

Running Javascript based on the output of PHP code

unusual problem with referencing jQuery mobile pages and implementing click functionality

How can I use CSS to change the background color of a fixed navbar when scrolling?

Utilize AJAX to update the database through a bootstrap modal interface

Having trouble getting the header div to span the entire screen

Online Database for Hybrid Mobile Applications

A directive containing a template

Show a notification on the screen if the source of the iframe is blank

Is there a way to disable a dropdown menu when clicking on a different one?

Issue with button press causing malfunction in (Service) function

Struggling to position the newest messages at the bottom of the list

Determine if a specific identifier is already present using Javascript or Jquery

Display the information stored in an array onto the console using console.log in Angular with Typescript

Cut an image using CSS while maintaining its original quality

Steps to launching a URL in a new window on Internet Explorer

Is it possible to rotate just the camera in ThreeJS by dragging the mouse within the scene?

Is there a way to ensure that the images in the slider all remain consistent in size?