Question

我想知道如何在两个表行上使用ngRepeatStart和End来使用ngSwitch，其中第二行仅在您单击顶部行时显示。

以下是我所得到的并且想要工作（没有工作）：

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

有没有办法修改我的第一个例子才能使它工作？

Answer 1

不要使用ng-switch，只需使用ng-show或ng-if。这是一个plunker

修改

好吧，我想如果你真的想要你可以使用ng-switch，虽然如果你所做的只是检查是/否，我建议不要这样做。这是更新的plunker。诀窍是交换机需要在第二个<tr>上，并且ng-switch-需要在<td>上。

现在，如果您需要每个开关都是一个表格行，那么您只需要使用ng-if。 ng-switch属性需要位于所有ng-switch-when的父级。这就是为什么只有当你把它放在<tbody>或切换<td>时才能使用。

AngularJs ngSwitch with ngRepeatStart / End

1 个答案:

修改