angularJS - Lặp đi lặp lại của tr trong một bảng, nhưng động thêm nhiều hàng trong khi vòng lặp

Question

Từ ví dụ luôn nói nhiều hơn thì chỉ là lời nói ở đây là những gì tôi muốn làm bằng ngôn ngữ khác

<tr> 
    <c:forEach items="${items}" var="item"> 
     <td>...</td> 
     <td>...</td> 
     <td>...</td> 
     <c:if test="${item.showWarning}"> 
     </tr><tr><td colspan="3">${item.warning}</td> 
     </c:if> 
</tr> 

Vì vậy, đây sẽ lặp trên một thiết lập các mục và hiển thị một số thuộc tính của các mục này. Nếu có cảnh báo, một hàng mới sẽ được thêm vào bên dưới hàng hiện tại, trong đó cảnh báo sẽ được hiển thị. Tuy nhiên, làm thế nào tôi có thể làm điều này trong angularJs? Nếu tôi đặt một ng-lặp lại trên tr, nó sẽ dừng lại ở thẻ đầu tiên của tr. Tôi đã đọc trên một số chủ đề khác mà điều này không phải là rất dễ dàng thực hiện, nhưng làm thế nào nó có thể được thực hiện? Và vâng, tôi thực sự muốn sử dụng một cái bàn. Đây là ví dụ giả tạo của tôi với angularjs mà rõ ràng là không làm việc như tôi muốn nó. Bất kỳ con trỏ nào làm thế nào điều này có thể được thực hiện?

JSBin example with tr-ng-repeat

Answer 1

Một giải pháp mà tôi có thể nghĩ có nhiều thẻ tbody trong cùng một bảng. Here là cuộc thảo luận về việc sử dụng nhiều thẻ tbody trong cùng một bảng.

Vì vậy, đối với vấn đề của bạn, bạn có thể có các thiết lập sau:

<table ng-controller="ItemController"> 
    <thead> 
     <th>Name</th> 
     <th>Description</th> 
     <th>warning?</th> 
    </thead> 
    <tbody ng-repeat="item in items"> 
     <tr> 
      <td>{{item.name}}</td> 
      <td>{{item.description}}</td> 
      <td>{{item.warning}}</td> 
     </tr> 
     <tr ng-show="item.warning"> 
      <td colspan="3" style="text-align: center">Warning !!!</td> 
     </tr> 
    </tbody> 
</table> 

Lặp lại cơ thể bàn nhiều lần như có mục cho bảng và bên trong nó có hai hàng - một để thực sự hiển thị mục nhập hàng và một mục được hiển thị có điều kiện.

Answer 2

Bạn có thể lặp lại trong tbody

<tbody ng-repeat="item in items"> 
    <tr> 
    <td>{{item.name}}</td> 
    <td>{{item.description}}</td> 
    <td>{{item.warning}}</td> 
    </tr> 
    <tr ng-show="item.warning"> 
    <td colspan="3">Warning !!!</td> 
    </tr> 
</tbody> 

Ngoài ra, bạn không cần phải quấn biểu ng-show trong {{}}, bạn chỉ có thể sử dụng item.warning

Answer 3

Hiện nay (1.0.7/1.1.5) bạn không thể dữ liệu đầu ra ngoài ng-repeat, nhưng phiên bản 1.2 (xem youtube video AngularJS 1.2 and Beyond lúc 17:30) sẽ mang lại cú pháp sau (phù hợp với ví dụ của bạn):

<tr ng-repeat-start="item in items"> 
    <td>...</td> 
    <td>...</td> 
    <td>...</td> 
</tr> 
<tr ng-repeat-end ng-show="item.showWarning"> 
    <td colspan="3">{{item.warning}}</td> 
</tr> 

ý tưởng là bất cứ điều gì là giữa -Bắt đầu và -end sẽ được lặp lại bao gồm yếu tố -end.