Question

我想使用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>

Answer 1

您可以将ng-switch指令用作自定义元素，而不是首先指定div。例如：

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

以下是一名玩家：http://plnkr.co/edit/zni6raUWOguhQh9jDiY3

Answer 2

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

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

或许，在您的情况下，您可以使用仅隐藏（ng-show）元素的ng-hide或display:none - 它们不会从{{1 }}

DOM

Answer 3

我会说使用ng-if，就像这样：

<div>
    <div ng-if="user==true">
        <span>One</span>
    </div>
    <div ng-if="user==false">
        <span>Two</span>
    </div>
</div>

Answer 4

您可以使用<span>来防止html布局更改因为<span>不像<div>，所以不会占用任何空间。

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

AngularJS使用ng-switch而不使用包装器div

4 个答案: