How to split array elements over multiple tr statements

Question

In this Fiddle : http://jsfiddle.net/U3pVM/17899/

I'm displaying multiple tr elements within an ng-repeat. How to have three td elements per row ? Do I need an inner angularjs ng-repeat and split the iconDets array ?

HTML:

<div ng-app>
<div ng-controller="MainCtrl">
 <table class="table table-bordered" cellspacing="1">
 <tr ng-repeat="d in dets">
    <td class="col-md-3">
          <div class="header"><a href="{{ d.title }}" target="_blank">{{d.title}}</div>

          <div class="title truncated-anchors"><a title="d.title" href='test");'>{{d.title}}</a></div>

          <div class="date">test</div>
   </td>
 </tr>
 </table>
</div>
    </div>

CSS:

/* Latest compiled and minified CSS included as External Resource*/

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css');

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css');

.table-bordered {
    border: none;
}

.filter {
    /* margin-left:auto;
     margin-right:auto;
     */
    background-color: white;
    font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
    font-size: 14px;
    width: 200px;
    padding-left: 20px;
}

.center {
    margin-left: auto;
    margin-right: auto;
    width: 1000px;
}

table {
    border-collapse: separate;
    border-spacing: 20px;
}

td {
    /* padding: 5px 10px 5px 5px;
     */
    background-color: #F0F8FF;
}

.header {
    font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
    font-size: 20px;
    padding-bottom: 5px;
    color: black;
}

.title {
    font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
    font-size: 14px;
}

.link {
    font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
    font-size: 14px;
    padding-bottom: 10px;
}

.date {
    padding-top: 10px;
    font-style: italic;
    font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
    font-size: 12px;
}

.truncated-anchors {
    display: inline-block;
    width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

JavaScript

function MainCtrl($scope) {

    var iconDets = new Array();
    var icon1 = new Object();
    icon1.title = "tester";
    var icon2 = new Object();
    icon2.title = "tester";

    iconDets.push(icon1);
    iconDets.push(icon1);
    iconDets.push(icon1);
    iconDets.push(icon1);
    iconDets.push(icon1);
    iconDets.push(icon1);

    $scope.dets = iconDets;

    var jsonString = JSON.stringify(iconDets);

  };

Update :

expected result :

Update2 :

The contents of iconDetarray should not change

Can you please add some sample result? – Nikhil Aggarwal Aug 15 '15 at 08:45 — Nikhil Aggarwal, Aug 15 '15 at 08:45
Is this what you want - http://jsfiddle.net/U3pVM/17901/ – softvar Aug 15 '15 at 08:51 — softvar, Aug 15 '15 at 08:51
@nikhil , I apologize, I posted incorrect version of fiddle – blue-sky Aug 15 '15 at 09:02 — blue-sky, Aug 15 '15 at 09:02

score 0 · Accepted Answer · edited May 23 '17 at 10:26

You can split the array in chuncks of the size 3. Now you have an array of array. The first level of iteration will be on tr and the second one will be on on td.

See the example bellow:

function MainCtrl($scope) {

  var iconDets = new Array();
  var icon1 = new Object();
  icon1.title = "tester1";
  var icon2 = new Object();
  icon2.title = "tester2";
  var icon3 = new Object();
  icon3.title = "tester3";
  var icon4 = new Object();
  icon4.title = "tester4";
  var icon5 = new Object();
  icon5.title = "tester5";
  var icon6 = new Object();
  icon6.title = "tester6";
  var icon7 = new Object();
  icon7.title = "tester7";

  
  iconDets.push(icon1);
  iconDets.push(icon2);
  iconDets.push(icon3);
  iconDets.push(icon4);
  iconDets.push(icon5);
  iconDets.push(icon6);
  iconDets.push(icon7);


  var i, j, temparray = [], chunk = 3;
  for (i = 0, j = iconDets.length; i < j; i += chunk) {
    temparray.push(iconDets.slice(i, i + chunk));
  }

  $scope.dets = temparray;

  var jsonString = JSON.stringify(iconDets);

};

/* Latest compiled and minified CSS included as External Resource*/

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css');
@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css');
 .table-bordered {
  border: none;
}
.filter {
  /* margin-left:auto;
  margin-right:auto;
  */
  background-color: white;
  font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
  font-size: 14px;
  width: 200px;
  padding-left: 20px;
}
.center {
  margin-left: auto;
  margin-right: auto;
  width: 1000px;
}
table {
  border-collapse: separate;
  border-spacing: 20px;
}
td {
  /* padding: 5px 10px 5px 5px;
  */
  background-color: #F0F8FF;
}
.header {
  font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
  font-size: 20px;
  padding-bottom: 5px;
  color: black;
}
.title {
  font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
  font-size: 14px;
}
.link {
  font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
  font-size: 14px;
  padding-bottom: 10px;
}
.date {
  padding-top: 10px;
  font-style: italic;
  font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
  font-size: 12px;
}
.truncated-anchors {
  display: inline-block;
  width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<div ng-app>
  <div ng-controller="MainCtrl">
    <table class="table table-bordered" cellspacing="1">
      <tr ng-repeat="det in dets">
        <td class="col-md-3" ng-repeat="d in det">
          <div class="header"><a href="{{ d.title }}" target="_blank">{{d.title}}</div>
         
          <div class="title truncated-anchors"><a title="d.title" href='test");'>{{d.title}}</a>
          </div>

          <div class="date">test</div>
        </td>
      </tr>
    </table>
  </div>
</div>

thanks but I'm expecting the 3 td elements per line with each td element containing all of its contents - in your example the contents of the td has changed — blue-sky, Aug 15 '15 at 08:47
@blue-sky See my updated answer, you can split the data in chunks and iterate over. (You can create a filter with this and apply it) — adricadar, Aug 15 '15 at 09:02

How to split array elements over multiple tr statements

1 Answers1