AngularJS ng-class 지시

정의와 사용법

ng-class 이 지시는 하나 이상의 CSS 클래스를 HTML 요소에 동적으로 바인딩하는 데 사용됩니다.

ng-class 지시의 값은 문자열, 객체 또는 배열이 될 수 있습니다.

문자열이면, 공백으로 구분된 하나 이상의 클래스 이름을 포함해야 합니다.

객체로서, 그것은 추가하고 싶은 클래스 이름이 키이고 부울 값을 값으로 하는 키-값 쌍을 포함해야 합니다. 값이 true로 설정되면 해당 클래스가 추가됩니다.

배열로서, 두 가지의 조합이 될 수 있습니다. 각 배열 요소는 위에 설명된 문자열이나 객체일 수 있습니다.

인스턴스

<div> 요소의 클래스를 변경하십시오:

<select ng-model="home">
    <option value="sky">Sky</option>
    <option value="tomato">Tomato</option>
</select>
<div ng-class="home">
    <h1>Welcome Home!</h1>
    <p>I like it!</p>
</div>

직접 시험해 보세요

문법

<element ng-class="expression</element>

모든 HTML 요소가 지원됩니다.

파라미터