angularjs-ng-repeat

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>

Solution

  • 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>