简体   繁体   中英

ng-repeat-start with 3 different TR

If you want to repeat this structure with 1 TR/1 TD and 1 TR/2 TDs

          <tr>
            <td>Nitish</td>
          </tr>
          <tr>
            <td>26</td>
            <td>Male</td>
          </tr>

you can do this as taken from http://www.nitishkumarsingh.com/blog/advantage-of-ng-repeat-start-and-ng-repeat-end-repeating-over-multiple-elements/

   <table>
   <tbody>
     <tr ng-repeat-start="l in list">
       <td>{{l.name}}</td>
     </tr>
     <tr ng-repeat-end>
       <td>{{l.age}}</td>
       <td>{{l.gender}}</td>
     </tr>
   </tbody>
 </table>

But what about adding one more TR with one more TD so 3 TDs after 1 and 2 TDs ?

          <tr>
            <td>Nitish</td>
          </tr>
          <tr>
            <td>26</td>
            <td>Male</td>
          </tr>
          <tr>
            <td>767 Fifth Avenue</td>
            <td>New York, NY 10153</td>
            <td>(212) 336-1440</td>
          </tr>    

Just put ng-repeat-end at last tr , so that intermediate template between ng-repeat-start & ng-repeat-end will get repeated.

<table>
   <tbody>
     <tr ng-repeat-start="l in list">
       <td>{{l.name}}</td>
     </tr>
     <tr>
       <td>{{l.age}}</td>
       <td>{{l.gender}}</td>
     </tr>
     <tr ng-repeat-end>
        <td>{{l.addressLine1}}</td>
        <td>{{l.addressLine2}}</td>
        <td>{{l.phoneNumber}}</td>
      </tr>
   </tbody>
</table>

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM