AngularJS ng-class 指令

AngularJS 實(shí)例

修改 <div> 元素的類(lèi):

<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>

運(yùn)行代碼 ?

定義和用法

ng-class 指令用于給 HTML 元素動(dòng)態(tài)綁定一個(gè)或多個(gè) CSS 類(lèi)。

ng-class 指令的值可以是字符串，對(duì)象，或一個(gè)數(shù)組。

如果是字符串，多個(gè)類(lèi)名使用空格分隔。

如果是對(duì)象，需要使用 key-value 對(duì)，key 為你想要添加的類(lèi)名，value 是一個(gè)布爾值。只有在 value 為 true 時(shí)類(lèi)才會(huì)被添加。

如果是數(shù)組，可以由字符串或?qū)ο蠼M合組成，數(shù)組的元素可以是字符串或?qū)ο蟆?/p>

語(yǔ)法

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

所有的 HTML 元素都支持。

參數(shù)值

值	描述
expression	表達(dá)式返回一個(gè)或多個(gè)類(lèi)名。

AngularJS 參考手冊(cè)

其他擴(kuò)展

上一篇：AngularJS ng-checked 指令下一篇：AngularJS ng-class-even 指令