CODEWITHSUNDEEP
javascriptangularjsjson
Praveen Rawat
Praveen Rawat

Reputation: 734

Is it possible to to generate multiple rows based on the column list by single ng-repeat?

I want to create 3 rows based on the columnList which contains 3 types of values i.e caption, shortCaption and columnName.

[{
    caption : "First Name",
    shortCaption: "FN",
    columnName : "FIRST_NAME"
},{
    caption : "Last Name",
    shortCaption: "LN",
    columnName : "LAST_NAME"
}
]

Currently i am generating table cell by iterating columnList with ng-repeat inside each row, here i am using ng-repeat three times which can be cause slowness, Is it possible to use ng-repeat only once at a time and generate all three rows, i also tried to use ng-repeat-start and ng-repeat-end but failed to get the output.

<tr>
<th  ng-repeat="column in columnList">
    {{column.caption}}
</th>
</tr>
<tr>
<th  ng-repeat="column in columnList">
    {{column.shortCaption}}
</th>
</tr>
<tr>
<th  ng-repeat="column in columnList">
    {{column.columnName}}
</th>
</tr>

http://plnkr.co/n0XKuwxOY8e1zjLfYwFI

Upvotes: 1

Views: 60

Answers (1)

bugs_cena
bugs_cena

Reputation: 494

template.html

<tr ng-repeat="column in columnList">
    <td ng-repeat="key in getKeys()" ng-bind="::column[key]"></td>
</tr>

Controller.js

$scope.getKeys = function() {
    return ['caption', 'shortCaption', 'columnName'];
}

This uses the ng-repeat twice. If you are sure about the keys of the objects in your column list, you can eliminate the 2nd ng-repeat - but the performance improvement will be negligible unless you have more than 500+ rows.

Upvotes: 1

Related Questions