AngularJS using ng-switch without wrapper div

Question

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?

<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

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

Answer 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

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

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

Answer 3

I would say use ng-if, like this:

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