웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리

HOME > js

ngSwitch 디렉티브를 사용하는 방법

Last Modified : 2016-12-19 / Created : 2016-12-19
4,051
View Count
상황에 따라 변하는 텍스트 및 요소들을 구현하기 위하여 ng-switch 디렉티브를 사용할 수 있습니다. ngSwitch는 자바스크립트 switch() 비슷한 역할을 구현가능하게 해줍니다.

만약 사용자가 글을 작성하게 저장할 경우 Save 버튼이 Saved로 변경하게 만들 경우 이 역시 switch를 사용하는 방법이 가능합니다. (참고로 조건이 적은 경우 ngIf 디렉티브를 사용하는 것도 좋습니다.)



! ngSwitch 예제보기

아래 예제에서는 isSaved라는 변수를 만들고 Save 버튼을 클릭시 이 변수값을 true로 변경하여 텍스트가 Saved로 바뀌게 하는 간단한 예제입니다.

<div ng-app="testApp" ng-controller="AppCtrl">
  저장하려면 아래 Save 버튼을 클릭하세요!
  <button ng-click="isSaved=true" ng-switch="isSaved">
    <span ng-switch-when="true">Save</span>
    <span ng-switch-default>Saved</span>
  </button>
</div>

이 예제는 버튼을 Save 클릭할 경우 텍스트가 Saved로 바뀌는 예제입니다. 복잡한 스크립트 구현 없이도 매우 간단하죠! 

만약 버튼이 클릭 불가능한 상태로 변경하려면 어떻게 하는게 좋을까요? 추가로 버튼을 비활성화 시키는 예제도 확인해보세요. 이 역시 매우 간단하게 html 확장으로만 가능합니다.

<div ng-app="testApp" ng-controller="AppCtrl">
  <button ng-click="isSaved=true" ng-disabled="isSaved" ng-switch="isSaved">
    <span ng-switch-when="isSaved">Saved</span>
    <span ng-switch-default>Save</span>
  </button>
</div>

ng-disabled 디렉티브를 사용하면 간단하게 해당 요소를 비활성화 할 수 있게됩니다.


Previous

자바스크립트 코딩 스타일 중 알아두면 좋은 것들

Previous

자바스크립트 중단점을 활용한 디버깅 방법