AngularJS的ng-class切换class

Posted 2020-08-15 糖粑粑

在angular中为我们提供了3种方案处理class： 
1：scope变量绑定

2：字符串数组形式。 
3：对象key/value处理。

第一种我们不推荐使用，看看其他两种解决方案：

字符串数组形式

字符串数组形式是针对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>

 

AngularJS的controller代码

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>

 

AngularJS的controller代码

var app = angular.module(\'myApp\', []);

app.controller(\'tabCtr\', function ($scope) { 
    //$scope.data = {}; 
    //$scope.data.show = true;//初始化scope下的变量

    $scope.isActive = true; 
   
})

 

配合ng-show实现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>

 

AngularJS的controller代码：

<div class="game_tab_change" ng-show="isActive">
<div class="game_desc_title">

<p>学子易贷<span>杯赛事介绍</span></p>
<p class="desc">此次联赛涵盖全国十个分赛区，分别为：北京、上海、广东、江苏、浙江、安徽、青岛、湖南、湖北、福建十个赛区。在赛期设置上分为春季赛、秋季赛和总决赛。其中春季赛所覆盖的赛区为：上海、江苏、浙江、安徽、青岛；秋季赛所覆盖赛区为：北京、广东、湖北、湖南、福建。</p>
<p>校区赛：<span>各校区附近网吧</span> 分区赛：<span>网咖</span> 赛区赛：<span>各赛区省会</span> 总决赛：<span>上海</span></p>
</div>
<div class="game_desc_time">
<p><span>4月8日-5月8日</span><span>5月21日-６月5日</span><span>6月10日-6月12日</span><span class="last">2016年6月18日</span></p>
<p><span>校园赛时间</span><span>分区赛时间</span><span>赛区赛时间</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.协办方：无锡市电子竞技协会</p>
<p>3.赞助方：.....</p>
<p>4.合作方：高校电竞社团</p>
<p class="Remark">
备注：高校电竞社团与学子易贷达成合作意向并成功帮助学子易贷完成高校 报名宣传以及后续工作可以登录学子易贷官网—“学子公益”申请社团活动 资金1000元，并升级成为学子易贷的高校合作社团，每月享受600元的社 团活动补助（寒暑假不享受）。
</p>
</div>

</div>

　　

 

文章来自：http://www.cnblogs.com/ruoqiang/p/5228338.html