ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • [AngularJS] 조건문 4종류. ng-if,else,switch,ng-class등등!!
    코딩은 주댕이로/JavaScript 2015. 9. 5. 21:02




    AngularJS의 조건문에 대해서 살펴봅시다.

    1. ng-switch

    2. ng-hide, ng-show

    3. ng-class

    4. ng-if

    넷 다 자주 사용되는 문법이니.. 하나만 사용하시기 보단 상황에 맞춰서 쓰시면 되겠습니다.



    1-1. ng-switch

    onswitch의 대상이 되는 변수를 적어주시고.

    case대신 when이라고 적어주면 일반 switch-case문과 흡사하네요!


    ng-switch 예제

    입력한 값 : {{shAngVar}}

    apple을 입력하셨군요.
    아무것도 입력하지 않으셨군요


    ng-switch 예제 소스





    2. ng-hide / ng-show

    특정 조건에 있어서 show/hide를 할 수 있는 directive입니다.

    저는 ng-repeat과 같이 자주 쓰는 편입니다.


    ng-hide / ng-show 예제

    isBlockedMember :

    isBlockedMember : {{isBlockedMember}}

    만나서 반갑습니다. 회원님.
    정지먹은 회원입니다 ㅎㅎ


    ng-hide / ng-show 예제 소스



    3-1. ng-class

    css와 함께 태그를 컨트롤하기에 편리합니다.


    ng-class 예제

    change Background color :


    ng-class 예제 소스




    4. ng-if

    ng-if문에는 else문이 제공되지 않습니다. ng-else란건 존재하지 않아요!

    따라서 if, else if, else 보다는 switch를 쓰는게 좋습니다.


    요거는 ng-show/ng-hide 랑 예제가 거의 비슷하므로 하지않을게요!


Designed by Tistory.