1

I am having an array which looks something like this,

var object = [ "ABCD" , "EFGH" , "IJKL", "MNOP", "QRST", "UVWX" ];
$scope.object = object;

I want to use ng-repeat to make a table and each row in table should consist of 3 columns. The table should look like this, 

Name Numb Type

ABCB EFGH IJKL
MNOP QRST UVWX

This is what my table looks like,

<thead>
     <th>Name</th>
     <th>Numb</th>
     <th>Type</th>
</thean>
<tr ng-repeat = "x in object">
     <td>{{x}}</td>
</tr>

I am not able to maintain 3 items per row here.

Improve this question

2 Answers 2

Reset to default
1

To do this you will simply need to update $scope.object with a nested array of size 3, so that we can print the first three items in each row like:

var app = angular.module('myApp', []);
app.controller('AppCtrl', function($scope) {
  var object = ["ABCD", "EFGH", "IJKL", "MNOP", "QRST", "UVWX"];

  // Update array to size of three items instead like
  var size = 3;
  $scope.object = [];
  for (var i = 0; i < object.length; i += size) {
    $scope.object.push(object.slice(i, i + size));
  }
});
table{border-collapse:collapse;width:100%}
table td,table th{border:1px solid #ddd;padding:8px}
table th{padding-top:12px;padding-bottom:12px;text-align:left;background-color:#4caf50;color:#fff}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<section ng-app="myApp">
  <div ng-controller="AppCtrl">
    <table>
      <thead>
        <tr>
          <th>Name</th>
          <th>Numb</th>
          <th>Type</th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="x in object">
          <td>{{x[0]}}</td>
          <td>{{x[1]}}</td>
          <td>{{x[2]}}</td>
        </tr>
      </tbody>
    </table>
  </div>
</section>

If you wan to make td also dynamic, you can use ng-repeat for table cells also like:

var app = angular.module('myApp', []);
app.controller('AppCtrl', function($scope) {
  var object = ["ABCD", "EFGH", "IJKL", "MNOP", "QRST", "UVWX"];

  // Update array to size of three items instead like
  var size = 3;
  $scope.object = [];
  for (var i = 0; i < object.length; i += size) {
    $scope.object.push(object.slice(i, i + size));
  }
});
table{border-collapse:collapse;width:100%}
table td,table th{border:1px solid #ddd;padding:8px}
table th{padding-top:12px;padding-bottom:12px;text-align:left;background-color:#4caf50;color:#fff}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<section ng-app="myApp">
  <div ng-controller="AppCtrl">
    <table>
      <thead>
        <tr>
          <th>Name</th>
          <th>Numb</th>
          <th>Type</th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="row in object">
          <td ng-repeat="cell in row">{{cell}}</td>
        </tr>
      </tbody>
    </table>
  </div>
</section>

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

Comments

0

You can solve it by the view side:

<thead>
     <th>Name</th>
     <th>Numb</th>
     <th>Type</th>
</thean>
<tr ng-repeat = "x in object" ng-if="$index % 3 === 0">
     <td>{{object[$index]}}</td>
     <td ng-if="object[$index + 1]">{{object[$index + 1]}}</td>
     <td ng-if="object[$index + 2]">{{object[$index + 2]}}</td>
</tr>
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.