學子易貸(angularJs中ng-class切換class的方法)

在angular中為我們提供了3種方案處理class:

1:scope變量綁定

2:字符串數組形式。

3:對象key/value處理。

第一種我們不推薦使用,看看其他兩種解決方案:

字符串數組形式

字符串數組形式是針對class簡單變化,具有排斥性的變化,true是什么class,false是什么class,其形如;

<spanng-class="{true:'btn01hover',false:'btn01'}[isActive]"ng-click="isActive=true">賽事介紹</span><spanng-class="{true:'btn02',false:'btn02hover'}[isActive]"ng-click="isActive=false">賽事合作</span>

varapp=angular.module('myApp',[]);app.controller('tabCtr',function($scope){//$scope.data={};//$scope.data.show=true;//初始化scope下的變量$scope.isActive=true;})

對象key/value處理

<spanng-class="{btn01:true,hover:isActive}"ng-click="isActive=true">賽事介紹</span><spanng-class="{btn02:'true',hover:!isActive}"ng-click="isActive=false">賽事合作</span>

varapp=angular.module('myApp',[]);app.controller('tabCtr',function($scope){//$scope.data={};//$scope.data.show=true;//初始化scope下的變量$scope.isActive=true;})

配合ng-show實現tab切換功能

<spanng-class="{btn01:true,hover:isActive}"ng-click="isActive=true">賽事介紹</span><spanng-class="{btn02:'true',hover:!isActive}"ng-click="isActive=false">賽事合作</span><pclass="game_tab_change"ng-show="isActive"><pclass="game_desc_title"><p>學子易貸<span>杯賽事介紹</span></p><pclass="desc">此次聯賽涵蓋全國十個分賽區,分別為:北京、上海、廣東、江蘇、浙江、安徽、青島、湖南、湖北、福建十個賽區。在賽期設置上分為春季賽、秋季賽和總決賽。其中春季賽所覆蓋的賽區為:上海、江蘇、浙江、安徽、青島;秋季賽所覆蓋賽區為:北京、廣東、湖北、湖南、福建。</p><p>校區賽:<span>各校區附近網吧</span>分區賽:<span>網咖</span>賽區賽:<span>各賽區省會</span>總決賽:<span>上海</span></p></p><pclass="game_desc_time"><p><span>4月8日-5月8日</span><span>5月21日-6月5日</span><span>6月10日-6月12日</span><spanclass="last">2016年6月18日</span></p><p><span>校園賽時間</span><span>分區賽時間</span><span>賽區賽時間</span><spanclass="last">總決賽時間</span></p></p></p><pclass="game_tab_change"ng-show="isActive==false"><pclass="game_host"><p>1.主辦方:學子易貸</p><p>2.協辦方:無錫市電子競技協會</p><p>3.贊助方:.....</p><p>4.合作方:高校電競社團</p><pclass="Remark">備注:高校電競社團與學子易貸達成合作意向并成功幫助學子易貸完成高校報名宣傳以及后續工作可以登錄學子易貸官網—“學子公益”申請社團活動資金1000元,并升級成為學子易貸的高校合作社團,每月享受600元的社團活動補助(寒暑假不享受)。</p></p></p>