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

HOME > angularjs

ng-class 속성 사용하기 ngClass 디렉티브 사용방법

Last Modified : 2018-08-01 / Created : 2016-12-04
15,589
View Count

AngularJS에서는 클래스명을 추가할때 가장 많이 사용되는 ngClass 디렉티브에 대하여 알아보려 합니다. ngClass를 사용하는 방법은 매우 다양합니다. 언제 ngClass를 쓸 수 있을까요?


! ngClass 디렉티브를 사용하는 경우는?

ngClass는 받아오는 데이터값이 다른 경우 서로 다른 class를 적용할 때 주로 사용합니다. 데이터는 scope 변수로 저장하고 html에서 이를 읽어서 각각 다른 class를 적용할 수 있는점이지요. 즉, html 내에서 유연하게 클래스를 사용하기 위해서 사용합니다. 이를 사용하여 쉽게 클래스명을 변경할 수 있으며 아래는 ngClass 디렉티브의 다양한 사용방법, 예제에 대하여 알아보도록 하겠습니다.



# ngClass 디렉티브 예제보기

ngClass 디렉티브를 사용하여 class명을 결정 또는 변경하기 위해서 하나의 예제 코드를 만들어 보았습니다. 우선 아래의 template 예제를 봐주세요.
@ ngclass.html
<span ng-class="{ is_checked: 'checked' }">Checkbox Value</span>

위 예제를 보시면 ngClass 디렉티브가 적용되어 있죠? 안에는 {}를 사용하여 scope내 is_checked와 checked라는 값이 들어가 있습니다. 페이지가 로딩되면서 is_checked 값을 확인하게 되고 뒤의 checked 클래스가 추가되거나 추가되지 않을 수 있습니다. 이를 각각 설명하면...

@ is_checked라는 값이 true인 경우
span 태그에는 설정된 값인 'checked'가 class에 추가되게됩니다. 즉 아래와 같이 나타날 것입니다.
<span class="checked">Checkbox Value</span>

@ is_checked라는 값이 true가 아닌 경우
이 경우에는 is_checked가 true가 아니기 때문에 'checked' 클래스가 적용되지 않게됩니다.
<span>Checkbox Value</span>


이제 AngularJS의 ngClass의 가장 간단한 사용방법에 대하여 알아보았습니다. scope 변수값의 true, false를 사용하는 위 방법은 가장 간단한 방법입니다. 하지만 이 방법 말고도 다양한 방법이 있습니다. scope 변수가 true, false가 아닌... 다양한 값 들에 따라서 class 명을 추가하거나 제어할 수 있습니다. 이 방법들은 아래에서 찾아보세요.


! true 또는 false 값을 사용하는 다른 ngClass 사용방법(Boolean)

그 전에 true, false를 사용하는 다른 방법 한 가지 더 알아봅니다. 해당하는 값이 true 또는 false인 경우에 각각 클래스를 지정하게됩니다.
<span ng-class="{ true: 'is_checked', false: 'not_checked' }[check_value]">Checkbox Value</span>

보시면 문법이 위에 알아봤던 방법과 살짝다릅니다. 무엇보다 뒤에 []를 사용하는 부분이 다르고 false인 경우에도 클래스명을 추가할 수 있다는 것이 특징입니다.




# ngClass 변수의 값에 따라 변하는 class 적용방법

사실 데이터 값이 true, false가 아닌 경우가 많겠죠. 그래서 이 방법이 매우 자주 사용됩니다. 아래의 방법들을 꼭 알아두시기 바랍니다. 다시 설명하면 변수의 값이 true, false 불리언이 아니라 텍스트명인 경우에 class를 지정하는 방법입니다.

i. ngClass 적용하는 첫번째 방법

아래는 yes라는 값을 가지는 경우에만 클래스명을 추가하고 싶을때 사용하는 방법입니다.
<span ng-class="{ 'red':  isTrue == 'yes' }">Checkbox Value</span>
만약 isTrue의 값이 yes라면 'red'라는 이름의 클래스명이 적용됩니다. 매우 유용하죠? yes가 아닌 어떤 값이라도 적용할 수 있습니다.


! ngClass 여러개의 조건에 클래스명 추가하기

하나가 아닌 조건이 여러개라면?? 이 경우 멀티 조건을 사용하기 위해서 콤마(,)를 구분자로 아래처럼 적용할 수 있습니다.
<span ng-class="{ 'red':  isTrue == 'yes', 'blue': isTrue == 'no' }">Checkbox Value</span>
여기서는 isTrue의 값이 yes라면 red가 적용되고 no라면 blue라는 클래스명이 적용됩니다


! ngClass를 사용하는 또 다른 방법

아래 역시 또 다른 방법으로 ngClass를 적용하는 예제입니다. 이번에는 약식 조건문처럼 ?와 :을 사용하는 방법으로 코드상으로 매우 간결합니다.
<span ng-class="check_value ? 'is_checked' : 'not_checked'">Checkbox Value</span>


이처럼 다양한 방법으로 ngClass 적용이 가능합니다.

Previous

AngularJS에서 jsonPadding 실행시 undefined 에러가 나는 경우