ng-repeat в таблице и условный tr

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

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

Это jsfiddle: http://jsfiddle.net/mx6v8j98/1/, который не работает. вот HTML часть:

<div ng-app ng-controller="MyCtrl"> 
    <table> 
     <tbody> 
      <tr ng-repeat="item in itemsList" ng-switch="$even" ng-class-even="'even'" ng-class-odd="'odd'"> 
       <div ng-switch-when="true"> 
        <td>{{item}} is even</td> 
        <td>even content</td> 
       </div> 
       <div ng-switch-default> 
        <td>{{item}} is odd</td> 
        <td>odd content</td> 
       </div> 
      </tr> 
     </tbody> 
    </table> 
</div>

В моем реальном мире случае, у меня есть много тдов со сложным содержанием, так что я не хочу использовать нг-если/нг-переключатель, когда на каждый

Обновление: я могу поместить ng-repeat на тег <tbody>, но это выглядит уродливым, и я не уверен, какие последствия относятся к стилю.

Обновление II: В моем случае сам тег tr отображается по-разному в соответствии с условием

источник

2015-09-27 IttayD

Это из-дивы внутри таблицы , plunkr жалуется в редакторе о режиме vodoo. он работает без них, если вы используете ng-ifs для каждого td (не очень приятно), http://plnkr.co/edit/2rMSCcIZJwYWD4CoUk25?p=preview – toskv

я бы изменил структуру данных вместо –

@toskv: «У меня много td со сложным контентом, поэтому я не хочу использовать ng-if/ng-switch-when на каждом « – IttayD

Как указано в другом ответе, <div> не разрешен как дочерний элемент <tr>.

Вы явно пытаются использовать <div> как логический контейнер для ng-switch-when, но так как ng-switch-when (и ng-switch-default) поддерживает multi-element, вам не нужен этот контейнер:

<tr ng-repeat="item in items" ng-switch="$even"> 

    <td ng-switch-when-start="true">{{item}} is even</td> 
    <td>even content 1</td> 
    <td>even content 2</td> 
    <td ng-switch-when-end>even content last</td> 

    <td ng-switch-default-start>{{item}} is odd</td> 
    <td>odd content 1</td> 
    <td>odd content 2</td> 
    <td ng-switch-default-end>odd content last</td> 

</tr>

источник

2015-09-27 17:43:19

ничего себе! где вы узнали, что ng-switch-when-start? Я не могу найти его в документах – IttayD

@IttayD, я редактировал вопрос со ссылкой на документацию. В двух словах любая директива, которая поддерживает 'multiElement' (в своем объекте определения директивы), может использоваться с' -start'/'-end' для обозначения диапазона элементов. Это особенность Angular. Например, 'ng-repeat' и' ng-if' являются такими директивами - попробуйте. –

В моем случае, сам tr обрабатывается по-разному (классы, атрибуты). У вас есть решение для этого? если нет, я приму свой ответ, поскольку он соответствует моему первоначальному вопросу. – IttayD

Кажется, вы не можете положить <DIV> в пределах <TR>, но до <TD>.

Решение 1: Положить условное выражение в каждые <TD>.

<!-- TDs for even row --> 
<td ng-if="$even">{{item}} is even</td> 
<td ng-if="$even">even content</td> 

<!-- TDs for odd row --> 
<td ng-if="!$even">{{item}} is odd</td> 
<td ng-if="!$even">odd content</td>

Решение 2: Для достаточно сложной структуры таблицы, вы бы рассмотреть создать свою собственную директиву для представления ячейки строки.

источник

2015-09-27 16:57:35 stanleyxu2005

ng-repeat в таблице и условный tr

ответ

Смежные вопросы