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 />
語法
<element ng-class="expression"></element>
所有的 HTML 元素都支持。
參數(shù)值
| 值 | 描述 |
|---|---|
| expression | 表達(dá)式返回一個(gè)或多個(gè)類名。 |
以上就是對(duì)AngularJS ng-class 指令資料的整理，有需要的朋友參考下。
您可能感興趣的文章:
- 詳解AngularJS ng-class樣式切換
- angularJs的ng-class切換class
- 詳解angularJs中關(guān)于ng-class的三種使用方式說明
- AngularJS使用ng-class動(dòng)態(tài)增減class樣式的方法示例
- 淺談AngularJS中ng-class的使用方法
- AngularJS中關(guān)于ng-class指令的幾種實(shí)現(xiàn)方式詳解
- AngularJS基礎(chǔ) ng-class-odd 指令示例
- AngularJS 基礎(chǔ)ng-class-even指令用法
- AngularJS中ng-class用法實(shí)例分析
相關(guān)文章
Angular2搜索和重置按鈕過場(chǎng)動(dòng)畫
這篇文章主要介紹了Angular2搜索和重置按鈕過場(chǎng)動(dòng)畫,需要的朋友可以參考下2017-05-05
這篇文章主要介紹了淺談AngularJS中使用$resource（已更新）的相關(guān)資料,需要的朋友可以參考下2017-09-09
這篇文章主要介紹了angular 內(nèi)存溢出的問題解決，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-07-07
angular2中router路由跳轉(zhuǎn)navigate的使用與刷新頁面問題詳解
這篇文章主要給大家介紹了angular2中router路由跳轉(zhuǎn)navigate的使用與刷新頁面問題的相關(guān)資料，文中介紹的非常詳細(xì)，對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起看看吧。2017-05-05
詳解如何在Angular優(yōu)雅編寫HTTP請(qǐng)求
這篇文章主要介紹了詳解如何在Angular優(yōu)雅編寫HTTP請(qǐng)求，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-12-12
這篇文章主要介紹了AngularJS入門教程（一）：靜態(tài)模板,本文是系列文章的第二篇,本系列會(huì)用一個(gè)項(xiàng)目來講解AngularJS的使用,需要的朋友可以參考下2014-12-12
本文主要介紹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
下面小編就為大家?guī)硪黄赼ngularJS的表單驗(yàn)證指令介紹。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-10-10
關(guān)于Angularjs中自定義指令一些有價(jià)值的細(xì)節(jié)和技巧小結(jié)
這篇文章主要介紹了關(guān)于Angularjs中自定義指令一些有價(jià)值的細(xì)節(jié)和技巧小結(jié),小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-04-04