ng-repeat-start与3个不同的TR

时间:2017-01-22 08:29:03

标签: javascript angularjs

如果您想用1 TR / 1 TD和1 TR / 2 TDs重复此结构

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

您可以从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>

但是,如果在1和2个TD之后再增加一个TR,再增加一个TD,那么3个TD呢?

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

1 个答案:

答案 0 :(得分:1)

ng-repeat-end放在最后tr,以便ng-repeat-start和{}之间的中间模板ng-repeat-end会重演。

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