AngularJS using ng-switch without wrapper div

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>

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


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>

Tags:

Angularjs