래퍼 div를 사용하지 않고 ng-switch를 사용하는 AngularJ

래퍼 div를 사용하지 않고 ng-switch를 사용하는 AngularJ

ng-switch를 사용하는 것은 DOM의 일부가 되고 싶지 않은 다른 요소를 사용하고 싶지 않기 때문입니다.그래서 저는 ng-hide/ng-show를 사용하지 않았습니다.아래 예에서는 다음 예만 사용했으면 합니다.span태그는 ng-switch에서 div wrapper를 사용하지 않고 DOM에 있습니다.이를 실현하는 가장 좋은 방법은 무엇입니까?

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

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에서 플레이할 수 있는 플런커가 있습니다.

@CrisAuer가 제공하는 솔루션은 여전히 래핑 요소를 생성합니다.AFIK 커스텀 디렉티브를 사용해야 합니다.사용할 수 있습니다.

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

아마, 당신 같은 경우에는,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>

쓰라고 말하고 싶다ng-if, 다음과 같이 합니다.

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

사용할 수 있습니다.<span>html 레이아웃의 변경을 방지합니다.<span>같지 않다<div>공간을 차지하지 않습니다.

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

언급URL : https://stackoverflow.com/questions/16407106/angularjs-using-ng-switch-without-wrapper-div