상황에 따라 변하는 텍스트 및 요소들을 구현하기 위하여
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 디렉티브를 사용하면 간단하게 해당 요소를 비활성화 할 수 있게됩니다.