您好,登錄后才能下訂單哦!
小編給大家分享一下angularJs中ng-class切換class的方法,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
在angular中為我們提供了3種方案處理class:
1:scope變量綁定
2:字符串?dāng)?shù)組形式。
3:對(duì)象key/value處理。
第一種我們不推薦使用,看看其他兩種解決方案:
字符串?dāng)?shù)組形式
字符串?dāng)?shù)組形式是針對(duì)class簡(jiǎn)單變化,具有排斥性的變化,true是什么class,false是什么class,其形如;
<span ng-class="{true: 'btn01 hover', false: 'btn01'}[isActive]" ng-click="isActive=true">賽事介紹</span> <span ng-class="{true: 'btn02 ', false: 'btn02 hover'}[isActive]" ng-click="isActive=false">賽事合作</span>
var app = angular.module('myApp', []); app.controller('tabCtr', function ($scope) { //$scope.data = {}; //$scope.data.show = true;//初始化scope下的變量 $scope.isActive = true; })
對(duì)象key/value處理
<span ng-class="{btn01: true, hover: isActive}" ng-click="isActive=true">賽事介紹</span> <span ng-class="{btn02: 'true ', hover: !isActive}" ng-click="isActive=false">賽事合作</span>
var app = angular.module('myApp', []); app.controller('tabCtr', function ($scope) { //$scope.data = {}; //$scope.data.show = true;//初始化scope下的變量 $scope.isActive = true; })
配合ng-show實(shí)現(xiàn)tab切換功能
<span ng-class="{btn01: true, hover: isActive}" ng-click="isActive=true">賽事介紹</span> <span ng-class="{btn02: 'true ', hover: !isActive}" ng-click="isActive=false">賽事合作</span> <div class="game_tab_change" ng-show="isActive"> <div class="game_desc_title"> <p>學(xué)子易貸<span>杯賽事介紹</span></p> <p class="desc">此次聯(lián)賽涵蓋全國(guó)十個(gè)分賽區(qū),分別為:北京、上海、廣東、江蘇、浙江、安徽、青島、湖南、湖北、福建十個(gè)賽區(qū)。在賽期設(shè)置上分為春季賽、秋季賽和總決賽。其中春季賽所覆蓋的賽區(qū)為:上海、江蘇、浙江、安徽、青島;秋季賽所覆蓋賽區(qū)為:北京、廣東、湖北、湖南、福建。</p> <p>校區(qū)賽:<span>各校區(qū)附近網(wǎng)吧</span> 分區(qū)賽:<span>網(wǎng)咖</span> 賽區(qū)賽:<span>各賽區(qū)省會(huì)</span> 總決賽:<span>上海</span></p> </div> <div class="game_desc_time"> <p><span>4月8日-5月8日</span><span>5月21日-6月5日</span><span>6月10日-6月12日</span><span class="last">2016年6月18日</span></p> <p><span>校園賽時(shí)間</span><span>分區(qū)賽時(shí)間</span><span>賽區(qū)賽時(shí)間</span><span class="last">總決賽時(shí)間</span></p> </div> </div> <div class="game_tab_change" ng-show="isActive==false"> <div class="game_host"> <p>1.主辦方:學(xué)子易貸</p> <p>2.協(xié)辦方:無錫市電子競(jìng)技協(xié)會(huì)</p> <p>3.贊助方:.....</p> <p>4.合作方:高校電競(jìng)社團(tuán)</p> <p class="Remark"> 備注:高校電競(jìng)社團(tuán)與學(xué)子易貸達(dá)成合作意向并成功幫助學(xué)子易貸完成高校 報(bào)名宣傳以及后續(xù)工作可以登錄學(xué)子易貸官網(wǎng)—“學(xué)子公益”申請(qǐng)社團(tuán)活動(dòng) 資金1000元,并升級(jí)成為學(xué)子易貸的高校合作社團(tuán),每月享受600元的社 團(tuán)活動(dòng)補(bǔ)助(寒暑假不享受)。 </p> </div> </div>
以上是“angularJs中ng-class切換class的方法”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對(duì)大家有所幫助,如果還想學(xué)習(xí)更多知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。