Вызов повторения tr с ng-repeat

Я борюсь со специальным прецедентом. Я предоставляю вам снимок jsfiddle внизу.

1. Таблица HTML

Мой HTML - это таблица. Директива ng-repeat должна применяться к элементу html. В моем случае использования это невозможно сделать, поскольку экземпляр ng-repeat состоит из двойного tr-элемента:

<!-- 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 не предоставляет синтаксический комментарий ng-repeat (в отличие от KnockoutJS). Я нашел похожие вопросы о SO. Однако прецедент состоял из добавления HTML внутри элемента. Шахта состояла бы в размещении нового tr после ng-повторного tr, но это просто не сработало. Кроме того, есть новые вещи, которые необходимо учитывать.

2. Директива Tooltip

Второй tr включает директиву всплывающей подсказки, взятую из angular -ui-bootstrap. Поэтому простой подход jQuery может оказаться невозможным.

3. МОЯ ЦЕЛЬ

Я предоставляю вам фрагмент кода, который вообще не использует ng-repeat. Моя цель - использовать ng-repeat для каждого элемента моей коллекции.

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

Ответы

Ответ 1

Вы можете использовать тег tbody для группировки нескольких tr вместе и использовать ngRepeat для его перебора.

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>

Кстати, похоже, что ваш код по-прежнему работает в JQuery. Даже вы поставили их в директиву. Как показано в приведенном выше примере, директива вообще не нужна, и JQuery не используется.

Ответ 2

Также возможно сделать это с помощью директив ng-repeat-start и ng-repeat-end:

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

По-моему, это намного лучше, чем повторять элемент tbody.

Ответ 3

Вот решение для этого.

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