angularJS - повторение tr в таблице, но динамическое добавление дополнительных строк во время цикла

Поскольку примеры всегда говорят больше, чем просто слова, вот что я хотел бы сделать на другом языке

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

Таким образом, мы перейдем к набору элементов и покажем некоторые свойства этих элементов. Если есть предупреждение, под текущей строкой будет добавлена ​​новая строка, в которой будет показано предупреждение. Однако как я могу это сделать в angularJs? Если я поставлю ng-repeat на tr, он остановится на первом закрывающем теге tr. Я читал в некоторых других темах, что это не очень легко сделать, но как это сделать? И да, я действительно хочу использовать стол. Вот мой надуманный пример с angularjs, который явно не работает так, как мне хотелось бы. Есть указания, как это можно сделать?

Пример JSBin с tr-ng-repeat


angularjs angularjs-ng-repeat
person Ronald    schedule 19.07.2013    source источник

Ответы (3)


arrow_upward
12
arrow_downward

Одно из решений, которое я могу придумать, - иметь несколько тегов tbody в одной таблице. Здесь обсуждается использование нескольких тегов tbody в та же таблица.

Итак, для вашей проблемы у вас может быть следующая настройка:

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

Повторите тело таблицы столько раз, сколько есть записей для таблицы и в ней есть две строки - одна для фактического отображения записи строки, а другая для условного отображения.

person callmekatootie    schedule 19.07.2013

arrow_upward
20
arrow_downward

В настоящее время (1.0.7 / 1.1.5) вы не можете выводить данные вне ng-repeat, но версия 1.2 (см. видеоролик на YouTube, AngularJS 1.2 и Beyond в 17:30) приведет к следующему синтаксису (адаптированному к вашему примеру):

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

Идея состоит в том, что все, что находится между -start и -end, будет повторяться, включая элемент -end.

person Liviu T.    schedule 19.07.2013
comment
действительно, тогда я буду ждать 1.2, чтобы сделать это таким образом, а до тех пор использовать решение tbody repeat. Спасибо за информацию, хотя - person Ronald; 22.07.2013

arrow_upward
0
arrow_downward

Вы можете повторять 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>

Также вам не нужно заключать выражение ng-show в {{}}, вы можете просто использовать item.warning

person Mark Coleman    schedule 19.07.2013