angularJs的ng-class切換class
在angular中為我們提供了3種方案處理class:
1:scope變量綁定
2:字符串數(shù)組形式。
3:對象key/value處理。
第一種我們不推薦使用,看看其他兩種解決方案:
字符串數(shù)組形式
字符串數(shù)組形式是針對class簡單變化,具有排斥性的變化,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;
})
對象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實現(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>學子易貸<span>杯賽事介紹</span></p>
<p class="desc">此次聯(lián)賽涵蓋全國十個分賽區(qū),分別為:北京、上海、廣東、江蘇、浙江、安徽、青島、湖南、湖北、福建十個賽區(qū)。在賽期設置上分為春季賽、秋季賽和總決賽。其中春季賽所覆蓋的賽區(qū)為:上海、江蘇、浙江、安徽、青島;秋季賽所覆蓋賽區(qū)為:北京、廣東、湖北、湖南、福建。</p>
<p>校區(qū)賽:<span>各校區(qū)附近網吧</span> 分區(qū)賽:<span>網咖</span> 賽區(qū)賽:<span>各賽區(qū)省會</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>校園賽時間</span><span>分區(qū)賽時間</span><span>賽區(qū)賽時間</span><span class="last">總決賽時間</span></p>
</div>
</div>
<div class="game_tab_change" ng-show="isActive==false">
<div class="game_host">
<p>1.主辦方:學子易貸</p>
<p>2.協(xié)辦方:無錫市電子競技協(xié)會</p>
<p>3.贊助方:.....</p>
<p>4.合作方:高校電競社團</p>
<p class="Remark">
備注:高校電競社團與學子易貸達成合作意向并成功幫助學子易貸完成高校
報名宣傳以及后續(xù)工作可以登錄學子易貸官網—“學子公益”申請社團活動
資金1000元,并升級成為學子易貸的高校合作社團,每月享受600元的社
團活動補助(寒暑假不享受)。
</p>
</div>
</div>
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
Angular 2 利用Router事件和Title實現(xiàn)動態(tài)頁面標題的方法
本篇文章主要介紹了Angular 2 利用Router事件和Title實現(xiàn)動態(tài)頁面標題的方法,具有一定的參考價值,有興趣的可以了解一下2017-08-08
AngularJS+Node.js實現(xiàn)在線聊天室
隨著互聯(lián)網和信息技術的發(fā)展,如何快速構建高效、強大的動態(tài)網站成為很多人研究的熱點。該文將結合AngularJS和Node.js構建一個在線聊天室,體現(xiàn)AngularJs和Node.js整合的優(yōu)點。2015-08-08
AngularJS基于factory創(chuàng)建自定義服務的方法詳解
這篇文章主要介紹了AngularJS基于factory創(chuàng)建自定義服務的方法,結合實例形式分析了AngularJS使用factory創(chuàng)建自定義服務的具體步驟、操作技巧與相關注意事項,需要的朋友可以參考下2017-05-05
ionic4+angular7+cordova上傳圖片功能的實例代碼
ionic是一個垮平臺開發(fā)框架,可通過web技術開發(fā)出多平臺的應用。這篇文章主要介紹了ionic4+angular7+cordova上傳圖片功能,本文通過實例代碼給大家介紹的非常詳細,具有一定的參考借鑒價值 ,需要的朋友可以參考下2019-06-06
利用VS Code開發(fā)你的第一個AngularJS 2應用程序
這篇文章主要給大家介紹了關于利用VS Code如何開發(fā)你的第一個AngularJS 2應用程序的相關資料,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友下面來一起看看吧。2017-12-12

