<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<style>
.sky {
 color:white;
 background-color:lightblue;
 padding:20px;
 font-family:"Courier New";
}
.tomato {
 background-color:coral;
 padding:40px;
 font-family:Verdana;
}
</style>
</head>
<body ng-app="">

<p>選擇一個(gè)類:</p>

<select ng-model="home">
<option value="sky">天空色</option>
<option value="tomato">番茄色</option>
</select>

<div ng-class="home">
 <h1>Welcome Home!</h1>
 <p>I like it!</p>
</div>

</body>
</html>

定義和用法

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

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

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

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

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

語(yǔ)法

所有的 HTML 元素都支持。

參數(shù)值

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

以上就是對(duì)AngularJS ng-class 指令資料的整理，有需要的朋友參考下。

您可能感興趣的文章:

相關(guān)文章

Angular.js項(xiàng)目中使用gulp實(shí)現(xiàn)自動(dòng)化構(gòu)建以及壓縮打包詳解
基于流的前端自動(dòng)化構(gòu)建工具，利用gulp可以提高前端開發(fā)效率，特別是在前后端分離的項(xiàng)目中。下面這篇文章主要給大家介紹了關(guān)于在Angular.js項(xiàng)目中使用gulp實(shí)現(xiàn)自動(dòng)化構(gòu)建以及壓縮打包的相關(guān)資料，需要的朋友可以參考下。
2017-07-07
angularjs封裝$http為factory的方法
本篇文章主要介紹了angularjs封裝$http為factory的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-05-05
angularjs的一些優(yōu)化小技巧
這篇文章主要介紹了angularjs的一些優(yōu)化小技巧,本文總結(jié)了5種優(yōu)化技巧,如一次綁定、盡可能少調(diào)用 ng-repeat、盡量在指令里寫原生語(yǔ)法、頁(yè)面內(nèi)盡量少用filters等,需要的朋友可以參考下
2014-12-12
詳解如何在Angular應(yīng)用中發(fā)起HTTP?302 redirect
這篇文章主要介紹了如何在Angular應(yīng)用中發(fā)起HTTP 302 redirect詳解，有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
2023-12-12
這篇文章主要給大家介紹了關(guān)于Angular 4.x+Ionic3踩坑之Ionic 3.x界面?zhèn)髦档南嚓P(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。
2018-03-03