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

I would like to use ng-switch because I do not want the other elements that I do not want to show to be part of the DOM. That is why i did not use ng-hide/ng-show. In the example below, I would like to only have the span tag be in the DOM without the div wrappers from the ng-switch. What is the best way to accomplish this?

我想使用ng-switch，因为我不希望我不希望显示的其他元素成为DOM的一部分。这就是为什么我没有使用ng-hide / ng-show。在下面的示例中，我希望只在DOM中使用span标记而不使用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>

3 个解决方案

#1

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

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

<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

这是一个可以玩的玩家：http：//plnkr.co/edit/zni6raUWOguhQh9jDiY3

#2

the solution provided by @ChrisAuer this still creates a wrapping element. AFAIK you'd have to use a custome directive. You may want to use angular-ui if

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

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

Probably, in your case, you'd be fine using ng-show or ng-hide which only hide(display:none) the element - they don't remove it form the DOM.

也许，在你的情况下，你可以使用ng-show或ng-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>

#3

I would say use ng-if, like this:

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

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

#1