28

我想使用 ng-switch 因为我不希望我不想显示的其他元素成为 DOM 的一部分。这就是为什么我没有使用 ng-hide/ng-show。在下面的示例中，我只想将span标签放在 DOM 中，而没有来自 ng-switch 的 div 包装器。实现这一目标的最佳方法是什么？

<div ng-switch on="user">
    <div ng-switch-when="true">
        <span>One</span>
    </div>
    <div ng-switch-when="false">
        <span>Two</span>
    </div>
</div>
4

4 回答 4

95

You can use the ng-switch directive as a custom element and not specify the div in the first place. For example:

<ng-switch on="user">
  <span ng-switch-when="true">One</span>
  <span ng-switch-default>Two</span>
</ng-switch>

Here is a plunker to play around with: http://plnkr.co/edit/zni6raUWOguhQh9jDiY3

于 2013-05-07T00:43:22.897 回答
1

@ChrisAuer 提供的解决方案仍然会创建一个包装元素。AFAIK 你必须使用客户指令。您可能想使用angular-ui if

<div ui-if="user">
    <span>One</span>
</div>
<div ui-if="!user">
    <span>Two</span>
</div>

可能，在您的情况下，您可以使用ng-showor ng-hidewhich only hide( display:none) 元素 - 他们不会将其从DOM.

<div ng-show="user"> <!-- same as ng-hide="!user" -->
    <span>One</span>
</div>
<div ng-hide="user"> <!-- same as ng-show="!user" -->
    <span>Two</span>
</div>
于 2013-05-07T12:16:39.513 回答
1

我会说 use ng-if，像这样：

<div>
    <div ng-if="user==true">
        <span>One</span>
    </div>
    <div ng-if="user==false">
        <span>Two</span>
    </div>
</div>
于 2014-02-27T19:49:33.320 回答
0

您可以使用它<span>来防止您的 html 布局发生变化，因为<span>不像<div>，它不会占用任何空间。

<span ng-switch="user">
  <span ng-switch-when="true">One</span>
  <span ng-switch-default>Two</span>
</span>
于 2019-03-06T07:04:16.803 回答