本文實(shí)例講述了AngularJS中ng-class用法。分享給大家供大家參考,具體如下:
使用 ng-class 動(dòng)態(tài)設(shè)置元素的類,方法是綁定一個(gè)代表所有需要添加的類的表達(dá)式。重復(fù)的類不會(huì)添加。當(dāng)表達(dá)式發(fā)生變化,先前添加的類會(huì)被移除,新類會(huì)被添加。
在angular中為我們提供了3種方案:
① 通過數(shù)據(jù)的雙向綁定(不推薦使用)
② 通過對(duì)象數(shù)組。
③ 通過key/value
一、通過數(shù)據(jù)雙向綁定:
function changeClass(){ $scope.className = "change2";}<div class="{{className}}"></div>二、通過字符串?dāng)?shù)組的形式來改變
<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>三、通過key/value
function Ctr($scope) {}<div ng-class {'selected': isSelected, 'car': isCar}"></div>說明:當(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ì)有所幫助。
新聞熱點(diǎn)
疑難解答
圖片精選