AngularJS中ng-class用法實(shí)例分析
本文實(shí)例講述了AngularJS中ng-class用法。分享給大家供大家參考，具體如下：
使用 ng-class 動(dòng)態(tài)設(shè)置元素的類，方法是綁定一個(gè)代表所有需要添加的類的表達(dá)式。重復(fù)的類不會(huì)添加。當(dāng)表達(dá)式發(fā)生變化，先前添加的類會(huì)被移除，新類會(huì)被添加。
在angular中為我們提供了3種方案：
① 通過(guò)數(shù)據(jù)的雙向綁定（不推薦使用）
② 通過(guò)對(duì)象數(shù)組。
③ 通過(guò)key/value
一、通過(guò)數(shù)據(jù)雙向綁定：
function changeClass(){
$scope.className = "change2";
}
<div class="{{className}}"></div>
二、通過(guò)字符串?dāng)?shù)組的形式來(lái)改變
<div ng-controller="firstController">
<div ng-class="{true:'change1',false:'change2'}[className]"></div>
</div>
<script>
var app=angular.module("myModule",[])
app.controller('firstController',function($scope){
$scope.className=true;
})
</script>
三、通過(guò)key/value
function Ctr($scope) {
}
<div ng-class {'selected': isSelected, 'car': isCar}">
</div>
說(shuō)明：當(dāng)isSelected為真的時(shí)候則添加class ‘selected' 當(dāng)isCar為真的時(shí)候則添加class ‘car'
更多關(guān)于AngularJS相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《AngularJS指令操作技巧總結(jié)》、《AngularJS入門與進(jìn)階教程》及《AngularJS MVC架構(gòu)總結(jié)》
希望本文所述對(duì)大家AngularJS程序設(shè)計(jì)有所幫助。
- 詳解AngularJS ng-class樣式切換
- angularJs的ng-class切換class
- 詳解angularJs中關(guān)于ng-class的三種使用方式說(shuō)明
- 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 指令用法
相關(guān)文章
這篇文章主要介紹了AngularJS創(chuàng)建自定義指令的方法,詳細(xì)的分析了自定義指令的原理、實(shí)現(xiàn)步驟、實(shí)現(xiàn)方法與相關(guān)注意事項(xiàng),需要的朋友可以參考下2016-11-11
本篇文章主要介紹了Angular 作用域的具體使用，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-12-12
angular 組件通信的幾種實(shí)現(xiàn)方式
這篇文章主要介紹了angular 組件通信的幾種實(shí)現(xiàn)方式，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-07-07
angular多選表單數(shù)據(jù)綁定的簡(jiǎn)單嘗試
AngularJS中數(shù)據(jù)綁定相信大家應(yīng)該都不陌生了,這篇文章主要給大家介紹了關(guān)于angular多選表單數(shù)據(jù)綁定的簡(jiǎn)單嘗試,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-05-05
簡(jiǎn)單談?wù)剅equire模塊化jquery和angular的問(wèn)題
下面小編就為大家?guī)?lái)一篇簡(jiǎn)單談?wù)剅equire模塊化jquery和angular的問(wèn)題。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-06-06
這篇文章主要介紹了AngularJS 2.0入門權(quán)威指南的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-10-10
利用require.js與angular搭建spa應(yīng)用的方法實(shí)例
這篇文章主要給大家介紹了關(guān)于利用require.js與angular搭建spa應(yīng)用的方法實(shí)例，文中通過(guò)示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的理解和學(xué)習(xí)具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面跟著小編來(lái)一起看看吧。2017-07-07
這篇文章主要給大家介紹了關(guān)于Angular.JS中this指向的相關(guān)資料，文中介紹的非常詳細(xì)，對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起看看吧。2017-05-05
系統(tǒng)的學(xué)習(xí)了一下angularjs，發(fā)現(xiàn)angularjs的有些思想根php的模塊smarty很像，例如數(shù)據(jù)綁定，filter。如果對(duì)smarty比較熟悉的話，學(xué)習(xí)angularjs會(huì)比較容易一點(diǎn),這篇文章給大家介紹angularjs filter用法詳解，感興趣的朋友一起學(xué)習(xí)吧2015-12-12
詳解Monaco?Editor中的Keybinding機(jī)制
這篇文章主要為大家介紹了詳解Monaco?Editor中的Keybinding機(jī)制詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09