CODEWITHSUNDEEP
javascriptangularjs
habibg
habibg

Reputation: 185

Angular ng-repeat limit elements in a table

I'm trying to build a table with ng-repeat that need a <tr> and up to three <td> in each row.

Sample Data:

[{
    "company" : "CompanyA",
    "title" : "PARTNER",
    "office" : "Amsterdam",
    "firstName" : "Joe",
    "lastName" : "Bettelheim",
    "profileUrl" : ""
}, {
    "company" : "CompanyA",
    "title" : "SENIOR ACCOUNT MANAGER",
    "office" : "Amsterdam",
    "firstName" : "Lianne",
    "lastName" : "Marker",
    "profileUrl" : " "
}, {
    "company" : "CompanyA",
    "title" : "ACCOUNT MANAGER",
    "office" : "Amsterdam",
    "firstName" : "Yana",
    "lastName" : "Van Dam",
    "profileUrl" : ""
}, {
    "company" : "CompanyA",
    "title" : "ACCOUNT EXECUTIVE",
    "office" : "Amsterdam",
    "firstName" : "Amanda",
    "lastName" : "Happy",
    "profileUrl" : " "
}, {
    "company" : "CompanyA",
    "title" : "EXECUTIVE COORDINATOR, OFFICE MANAGEMENT",
    "office" : "Amsterdam",
    "firstName" : "Quita",
    "lastName" : "Ruffle",
    "profileUrl" : " "
}]

Here is what I have currently and it creates a row and one table data for each object in the array. 

<table cellspacing="0" cellpadding="3" border="0" style="width:100%;border-collapse:collapse;">
    <tr ng-repeat="empl in employees">
        <td style="width:33%;">
            <span>
                <a class="promotee" href=""> {{ empl.firstName }} {{ empl.lastName }}</a>
                <br>{{empl.title | lowercase}}
            </span>
        </td>
    </tr>
</table>

We can create as many rows as needed but can't have more than three table data in each row. Anyone know a solution for limiting up to three <td> in each <tr>?

Upvotes: 0

Views: 1438

Answers (2)

Walter Chapilliquen - wZVanG
Walter Chapilliquen - wZVanG

Reputation: 12004

Try:

$scope.toRows = function(arr, total){
    var i = 0, rows = [];
    while(i < arr.length){
        i % total == 0 && rows.push([]);
        rows[rows.length-1].push(arr[i++])
    }
    return rows
};

$scope.employeesRows = $scope.toRows($scope.employees, 3);

<table cellspacing="0" cellpadding="3" border="0" style="width:100%;border-collapse:collapse;">
    <tr ng-repeat="row in employeesRows"> 
        <td style="width:33%;" ng-repeat="empl in row">
            <span>
                <a class="promotee" href=""> {{ empl.firstName }} {{ empl.lastName }}</a>
                <br>{{empl.title | lowercase}}
            </span>
        </td>
    </tr>
</table>

Demo

Upvotes: 2

Nikhil Aggarwal
Nikhil Aggarwal

Reputation: 28445

I have created a plunker for you

HTML

<tr ng-repeat="block in blocks">
        <td style="width:33%;" ng-repeat="empl in block">
            <span>
                <a class="promotee" href=""> {{ empl.firstName }} {{ empl.lastName }}</a>
                <br>{{empl.title | lowercase}}
            </span>
        </td>
    </tr>

JS

var iteration = blocks.length/3; // consider your array as blocks[]
if (blocks.length % 3 !== 0) {
  iteration += 1;
}

var compiledBlock = [];
for (var i = 0 ; i < iteration; i++) {
  if(i == iteration - 1) {
    compiledBlock.push(blocks);

  } else {
    compiledBlock.push(blocks.splice(0,3))

  }

  $scope.blocks = compiledBlock;

"http://plnkr.co/edit/26iB01KmjaishTTFL3Hq?p=preview"

Upvotes: 1

Related Questions