angularjs - Powtarzanie TR w tabeli, ale dynamicznie dodając więcej wierszy podczas zapętlenie

Question

Ponieważ przykłady zawsze powiedzieć więcej niż tylko słowa Oto, co chciałbym robić w innym języku

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

więc będzie pętla ponad zestaw przedmiotów i pokaż niektóre właściwości tych przedmiotów. Jeśli pojawi się ostrzeżenie, nowy wiersz zostanie dodany pod bieżącym wierszem, w którym pojawi się ostrzeżenie. Jak jednak mogę to zrobić w angularJs? Jeśli wstawię powtórzenie ng na tr, zatrzyma się na pierwszym tagu końca tr. Czytałem w innych wątkach, że nie jest to łatwe, ale jak to zrobić? I tak, naprawdę chcę użyć tabeli. Oto mój przykład z angularjs, który oczywiście nie działa tak jakbym chciał. Jakieś wskazówki, jak to zrobić?

JSBin example with tr-ng-repeat

Answer 1

Jedno rozwiązanie, które mogę myśleć z ma wiele znaczników tbody w obrębie tej samej tabeli. Here to dyskusja na temat używania wielu tagów tbody w obrębie tej samej tabeli.

Tak, dla swojego problemu, można mieć następującą konfigurację:

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

powtórzyć ciało tabeli tyle razy, ile jest wpisów do stołu i w nim dwa wiersze - jeden faktycznie wyświetlić pozycja wiersza i jedna wyświetlana warunkowo.

Answer 2

Można powtórzyć nad 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> 

Również nie trzeba zawinąć wyraz ng-show w {{}}, można po prostu użyć item.warning

Answer 3

Obecnie (1.0.7/1.1.5) ty nie może dane wyjściowe poza NG-powtarzam, ale wersja 1,2 (patrz wideo youtube AngularJS 1.2 and Beyond o 17:30) przyniesie następującą składnię (dostosowany do przykładu):

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

Chodzi o to, że to, co jest między -start i -end zostanie powtórzone, włączając element -end.