AngularJS入門教程之ng-class 指令用法
更新時間：2016年08月01日 09:13:40 投稿：lqh
本文主要介紹AngularJS ng-class 指令,這里幫大家整理了ng-class資料和示例代碼,學(xué)習(xí)AngularJS指令的同學(xué)可以參考下
AngularJS ng-class 指令
AngularJS 實例
修改 <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>選擇一個類:</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 元素動態(tài)綁定一個或多個 CSS 類。
ng-class 指令的值可以是字符串，對象，或一個數(shù)組。
如果是字符串，多個類名使用空格分隔。
如果是對象，需要使用 key-value 對，key 是一個布爾值，value 為你想要添加的類名。只有在 key 為 true 時類才會被添加。
如果是數(shù)組，可以由字符串或?qū)ο蠼M合組成，數(shù)組的元素可以是字符串或?qū)ο蟆?br />
語法
<element ng-class="expression"></element>
所有的 HTML 元素都支持。
參數(shù)值
| 值 | 描述 |
|---|---|
| expression | 表達式返回一個或多個類名。 |
以上就是對AngularJS ng-class 指令資料的整理，有需要的朋友參考下。
相關(guān)文章
Angular.js項目中使用gulp實現(xiàn)自動化構(gòu)建以及壓縮打包詳解
基于流的前端自動化構(gòu)建工具，利用gulp可以提高前端開發(fā)效率，特別是在前后端分離的項目中。下面這篇文章主要給大家介紹了關(guān)于在Angular.js項目中使用gulp實現(xiàn)自動化構(gòu)建以及壓縮打包的相關(guān)資料，需要的朋友可以參考下。2017-07-07
本篇文章主要介紹了angularjs封裝$http為factory的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-05-05
這篇文章主要介紹了angularjs的一些優(yōu)化小技巧,本文總結(jié)了5種優(yōu)化技巧,如一次綁定、盡可能少調(diào)用 ng-repeat、盡量在指令里寫原生語法、頁面內(nèi)盡量少用filters等,需要的朋友可以參考下2014-12-12
詳解如何在Angular應(yīng)用中發(fā)起HTTP?302 redirect
這篇文章主要介紹了如何在Angular應(yīng)用中發(fā)起HTTP 302 redirect詳解，有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-12-12
這篇文章主要介紹了ng-zorro-antd 入門初體驗，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-12-12 
這篇文章主要介紹了使用Angular-CLI構(gòu)建NPM包的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-09-09 
本篇文章主要介紹了Angular 4 指令快速入門教程，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-06-06 
詳解在Angularjs中ui-sref和$state.go如何傳遞參數(shù)
這篇文章主要介紹了詳解在Angularjs中ui-sref和$state.go如何傳遞參數(shù)，詳細的介紹了ui-sref和$state.go的區(qū)別和如何傳參，有興趣的可以了解下
2017-04-04 
這篇文章主要介紹了AngularJS中的Promise詳細介紹及實例代碼的相關(guān)資料,Promise是一種模式，以同步操作的流程形式來操作異步事件，避免了層層嵌套，可以鏈式操作異步事件，需要的朋友可以參考下
2016-12-12