Блог

Я пытаюсь выяснить, как я мог бы использовать ngSwitch с ngRepeatStart и End для двух строк таблицы, где вторая строка отображается только при нажатии на верхнюю.

Вот что у меня есть, и я хочу заставить работать (не работает):

 <tr
                    data-ng-repeat-start="user in users | filter : { name: search, active: searchActive }"
                    data-ng-click="selectUser(user)"
                    data-ng-switch on="isSelected(user)">
                    <td>{{ user.name }}</td>
                    <td>{{ user.email }}</td>
                    <td>{{ user.active }}</td>
                    <td>{{ user.dob | date: 'EEEE, dd MMMM yyyy' }}</td>
                </tr>
                <tr data-ng-repeat-end data-ng-switch-when="true">
                    <td colspan="4">
                        {{ user.description }}
                    </td>
                </tr>
  

и вот что работает:

 <tbody
                data-ng-repeat="user in users | filter : { name: search, active: searchActive }"
                data-ng-click="selectUser(user)"
                data-ng-switch on="isSelected(user)">
                <tr>
                    <td>{{ user.name }}</td>
                    <td>{{ user.email }}</td>
                    <td>{{ user.active }}</td>
                    <td>{{ user.dob | date: 'EEEE, dd MMMM yyyy' }}</td>
                </tr>
                <tr data-ng-switch-when="true">
                    <td colspan="4">
                        {{ user.description }}
                    </td>
                </tr>
            </tbody>
  

Я хотел бы избежать tbody тега переноса и вместо этого использовать ngRepeatStart / End.

Есть ли способ изменить мой первый пример, чтобы заставить его работать?

Не используйте ng-switch, просто используйте ng-show или ng-if . Вот плунжер

Редактировать

Хорошо, я думаю, если вы действительно хотите, вы можете использовать ng-switch , хотя я бы посоветовал не делать этого, если все, что вы делаете, это проверка true / false . Вот обновленный плунжер. Хитрость в том, что коммутатор должен быть на втором <tr> , а ng-switch — когда это необходимо, чтобы быть на <td> .

Теперь, если вам нужно, чтобы каждый переключатель был строкой таблицы, тогда вам просто нужно будет использовать ng-if . ng-switch Атрибут должен быть родительским для всех ng-switch-when ‘s. Вот почему переключатель работает только тогда, когда вы его включаете <tbody> или когда вы переключаете <td> ‘s.