[AngularJS] ng-class 를 사용하여 동적으로 class 넣기

[AngularJS] ng-class 를 사용하여 동적으로 class 넣기

 

 

 

 

 

class 를 동적으로 입힐 수 있는 Directive.

간단하게 정리해보자

 

 

 

 

 

 

 

 

1) ng-class="{className : '변수', className : '변수',...}"

- 각각의 변수가 true 값이 되면 맵핑된 class 가 적용됨!

 

 

[예시]

ng-class="{main_tit : mainFlag}"


// main_tit 은 넣고싶은 class 명!
// mainFlag 가 true 면, main_tit 가 적용됨!

 

 

 

 

 

 

 

 

2) ng-class="{className : '변수' == 값,....}"

- 변수와 값이 같다면 (true) => 조건식 같이 사용이 가능함!

 

 

[예시]

ng-class="{redFont:tempCartList.length > 0}"


// redFont 는 지정하고 싶은 class 명!
// tempCartList.length 가 0보다 크다면, redFont 라는 class 를 입혀라!

 

 

 

 

 

 

 

3) ng-class="{className : '변수', className : '변수',...}[값]

- 대괄호로 묶어준 값과 일치하는 DOM에 class가 적용됨!

- 여러 요소 중 특정하여 class 를 넣어줘야 할 때 유용!

 

 

 

 

 

 

 

 

 

 

 

 

style 을 동적으로 제어하고 싶다면?

https://devinserengeti.tistory.com/17?category=901018

[AngularJS] ng-style 사용하기