Angular.js의 ngClass 사용방법

Angualr.js의 ngClass는 Angular로 HTML 요소에 CSS 클래스를 동적으로 줄 수 있는 디렉티브다. HTML에서 클래스를 바꿔주는 건 자주 있는 일이지만 왠지 ngClass의 문법은 잘 안 외워져서 쓸 때마다 헷갈린다.(문서가 좀 별로라)

ngClass

1

<p ng-class="{strike: deleted, bold: important, red: error}">Example</p>

기본적인 문법은 다음과 같다. ngClass에 객체를 전달하고 키가 class 명이고 값 부분이 class를 사용하지 말지에 대한 표현식이다. 그래서 위 코드는 deleted, important, error라는 변수가 true이면 각각에 해당하는 strike, bold, red라는 CSS가 추가된다. 표현식을 쓸 수 있으므로 위처럼 변수 대신 다음과 같이 사용할 수도 있다. 우측이 true/false로만 떨어지면 된다.

1

ng-class="{selected: $index === 1}"

Angular 표현식으로 사용하면 다양한 상황에 제어할 수 있지만, 다음과 값에 따라 class를 다르게 줘야 한다면 꽤 복잡해진다.

1

ng-class="{food: type == 'food', place: type == 'place', people: type == 'people'}"

이런 경우에는 다음과 같이 간단하게 적을 수 있다.

1

ng-class="type"

다음과 같이 배열로 전달해서 여러 클래스를 한꺼번에 적용할 수도 있다. 이렇게 작성하면 type변수에 할당된 문자열이 class 명으로 적용된다.

1

ng-class="[type1, type2, type3]"

좀 더 세밀하게 제어하고 싶다면 클래스 명을 반환하는 함수를 작성하면 된다.

1

<p ng-class="customClass('type2')">Map Syntax Example </p>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

app.controller('MainController', function($scope) {
  $scope.customClass = function (name) {
    var className = '';
    if (name === 'type1') {
      className = 'custom1';
    } else if (name === 'type2') {
      className = 'custom2';
    } else if (name === 'type3') {
      className = 'custom3';
    }
    return className;
  };
});

사실 이런 정도의 커스텀은 함수를 쓸 필요도 없이 다음과 같은 문법으로도 사용할 수 있다.

1

<p ng-class="{type1: 'custom1', type2: 'custom2', type3: 'custom3'}[type]">Map Syntax Example </p>

마지막에 대괄호로 묶어준 변수의 값과 일치하는 키에 해당하는 값이 클래스명으로 추가된다.(원래 이 문법이 어려워서 글을 쓰기 시작한건데 테스트가 잘 안되서 내용에서 뺐다가 댓글에서 Sangmin Yoon님의 글을 보고 무슨 실수를 했는지 깨달았다 ㅡㅡ;;)