AngularJS入門教程之ng-class 指令用法

更新時(shí)間：2016年08月01日 09:13:40 投稿：lqh

本文主要介紹AngularJS ng-class 指令,這里幫大家整理了ng-class資料和示例代碼,學(xué)習(xí)AngularJS指令的同學(xué)可以參考下

AngularJS ng-class 指令

AngularJS 實(shí)例

修改 <div> 元素的類:

<!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)文章

Angular2搜索和重置按鈕過(guò)場(chǎng)動(dòng)畫
這篇文章主要介紹了Angular2搜索和重置按鈕過(guò)場(chǎng)動(dòng)畫,需要的朋友可以參考下
2017-05-05
淺談AngularJS中使用$resource（已更新）
這篇文章主要介紹了淺談AngularJS中使用$resource（已更新）的相關(guān)資料,需要的朋友可以參考下
2017-09-09
angular 內(nèi)存溢出的問(wèn)題解決
這篇文章主要介紹了angular 內(nèi)存溢出的問(wèn)題解決，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-07-07
angular2中router路由跳轉(zhuǎn)navigate的使用與刷新頁(yè)面問(wèn)題詳解
這篇文章主要給大家介紹了angular2中router路由跳轉(zhuǎn)navigate的使用與刷新頁(yè)面問(wèn)題的相關(guān)資料，文中介紹的非常詳細(xì)，對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起看看吧。
2017-05-05
詳解如何在Angular優(yōu)雅編寫HTTP請(qǐng)求
這篇文章主要介紹了詳解如何在Angular優(yōu)雅編寫HTTP請(qǐng)求，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-12-12
AngularJS入門教程（一）：靜態(tài)模板
這篇文章主要介紹了AngularJS入門教程（一）：靜態(tài)模板,本文是系列文章的第二篇,本系列會(huì)用一個(gè)項(xiàng)目來(lái)講解AngularJS的使用,需要的朋友可以參考下
2014-12-12
AngularJS 自定義指令詳解及示例代碼
本文主要介紹AngularJS 自定義指令,這里整理了基礎(chǔ)資料及詳細(xì)的示例代碼及實(shí)現(xiàn)效果圖，有需要的小伙伴可以參考下
2016-08-08
AngularJS教程之MVC體系結(jié)構(gòu)詳解
本文主要講解AngularJS MVC體系結(jié)構(gòu)，這里提供詳細(xì)的教程供大家學(xué)習(xí)參考，有需要的小伙伴可以參考下
2016-08-08
基于angularJS的表單驗(yàn)證指令介紹
下面小編就為大家?guī)?lái)一篇基于angularJS的表單驗(yàn)證指令介紹。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-10-10
關(guān)于Angularjs中自定義指令一些有價(jià)值的細(xì)節(jié)和技巧小結(jié)
這篇文章主要介紹了關(guān)于Angularjs中自定義指令一些有價(jià)值的細(xì)節(jié)和技巧小結(jié),小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-04-04