CODEWITHSUNDEEP
angularjs-ng-repeat
Jerry
Jerry

Reputation: 6557

How to have multiple rows in a ng-repeat

I have an AngularJS app.

I have a page where I am displaying a table of information for the user to edit.

However, there are too many columns going across the page. I would like to move 1 or more columns into their own row.

Below is basically what I am currently doing. How can I move "item.info10" into it's own row? With a colspan=10?

<table class="table table-condensed table-striped">
   <tbody>
      <!--Headers-->
      <tr>Header 01</tr> .... <tr>Header 10</tr>

    <!--Details-->
    <tr ng-repeat="item in vm.myList">
        <td><class="form-control input-sm" type="text" ng-model="item.info01" /> </td>
        ...
        <td><class="form-control input-sm" type="text" ng-model="item.info10" /> </td>
    </tr>
</tbody>
</table>

Upvotes: 0

Views: 27

Answers (1)

galalem
galalem

Reputation: 437

In Angular you can use ng-container, I'm not familiar with AngularJS syntaxe but it should be something like this

<table class="table table-condensed table-striped">
   <tbody>
      <!--Headers-->
      <tr>Header 01</tr> .... <tr>Header 10</tr>

    <!--Details-->
    <tr ng-repeat-start="item in vm.myList">
        <td><class="form-control input-sm" type="text" ng-model="item.info01" /> </td>
        ...
    </tr>
    <tr ng-repeat-end>
        <td colspan="10"><class="form-control input-sm" type="text" ng-model="item.info10" /> </td>
    </tr>
</tbody>
</table>

Upvotes: 1

Related Questions