Thách thức lặp lại tr với ng-repeat

Question

Tôi đang vật lộn với trường hợp sử dụng đặc biệt. Tôi cung cấp cho bạn một đoạn mã jsfiddle ở phía dưới.

1. HTML bảng

HTML của tôi là một bảng. Chỉ thị ng-repeat phải được áp dụng cho phần tử html. Trong trường hợp sử dụng của tôi, điều này không thể được thực hiện như một thể hiện của ng-repeat bao gồm một yếu tố tr kép:

<!-- ng-repeat the following block n times --> 
<tr> 
<td>text</td> 
</tr> 
<tr> 
<td tooltip="comment that is bound to the first tr">hover me</td> 
</tr> 

AngularJS không cung cấp một lời nhận xét ng-repeat cú pháp (không giống như KnockoutJS). Tôi đã tìm thấy các câu hỏi tương tự về SO. Tuy nhiên, ca sử dụng bao gồm việc gắn thêm HTML bên trong một phần tử. Của tôi sẽ bao gồm việc đặt một tr mới sau khi tr-lặp lại tr, nhưng nó chỉ không hoạt động. Bên cạnh đó, có một công cụ mới để đưa vào tài khoản.

2. Tooltip chỉ

Các tr thứ hai nhúng một chỉ thị tooltip, mà được lấy từ góc-ui-bootstrap. Do đó một cách tiếp cận jQuery thuần túy có thể không khả thi.

3. MỤC TIÊU CỦA TÔI

tôi cung cấp cho bạn một đoạn mã mà không sử dụng ng-repeat cả. Mục tiêu của tôi là sử dụng ng-repeat được áp dụng cho từng phần tử trong bộ sưu tập của tôi.

http://jsfiddle.net/RkCMr/1/

Answer 1

Bạn có thể sử dụng thẻ tbody cho groupping nhiều tr với nhau và sử dụng ngRepeat để lặp qua nó.

http://jsfiddle.net/RkCMr/4/

<div ng-app="challenge"> 
    <h3>how can I refactor it out using ng-repeat?</h3> 
    <table ng-controller="ctrl"> 
     <thead></thead>   
     <tbody ng-repeat="item in collection"> 
      <tr ng-click="showing=!showing"> 
       <td>click</td> 
       <td>{{item}}</td> 
      </tr> 
      <tr ng-show="showing"> 
       <td>--></td> 
       <td>comment {{item}} 
        <a tooltip="a tooltip comment {{item}}"> 
         <i class="icon-ok-sign"></i> 
        </a> 
       </td>     
      </tr> 
     </tbody> 
    </table>  
</div> 

Bằng cách này, nó trông giống như mã của bạn vẫn còn trong Jquery cách làm việc. Ngay cả bạn đã đặt chúng trong một chỉ thị. Như trong ví dụ trên, một chỉ thị là không cần thiết và JQuery không được sử dụng.

Answer 2

Đây là giải pháp cho việc này.

<div ng-app="challenge"> 
<h3>how can I refactor it out using ng-repeat?</h3> 
<table ng-controller="ctrl"> 
    <thead></thead> 
    <tbody ng-repeat="l in collection"> 
     <tr ng-click="isRowCollapsed=!isRowCollapsed"> 
      <td>click</td> 
      <td>{{l}}</td> 
     </tr> 
     <tr ng-hide="isRowCollapsed"> 
      <td>--></td> 
      <td>comment {{l}} 
       <a tooltip="a tooltip comment {{l}}"> 
        <i class="icon-ok-sign"></i> 
       </a> 
      </td>     
     </tr>    
    </tbody> 
</table>  

http://jsfiddle.net/RkCMr/7/

Answer 3

Nó cũng có thể làm điều đó với ng-repeat-start và ng-repeat-end directives:

<table> 
    <tr ng-repeat-start="item in items"> 
    <td>first</td> 
    <td>row</td> 
    </tr> 
    <tr ng-repeat-end> 
    <td>second</td> 
    <td>row</td> 
    </tr> 
</table> 

Theo tôi nó là tốt hơn nhiều so lặp lại tbody phần tử.