angularJs的ng-class切换class
更新时间:2017年06月23日 08:28:48 作者:ruo222
这篇文章主要介绍了angularJs的ng-class切换class,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
在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>
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实现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">此次联赛涵盖全国十个分赛区,分别为:北京、上海、广东、江苏、浙江、安徽、青岛、湖南、湖北、福建十个赛区。在赛期设置上分为春季赛、秋季赛和总决赛。其中春季赛所覆盖的赛区为:上海、江苏、浙江、安徽、青岛;秋季赛所覆盖赛区为:北京、广东、湖北、湖南、福建。</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日-6月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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
相关文章
Angular 2 利用Router事件和Title实现动态页面标题的方法
本篇文章主要介绍了Angular 2 利用Router事件和Title实现动态页面标题的方法,具有一定的参考价值,有兴趣的可以了解一下2017-08-08
AngularJS基于factory创建自定义服务的方法详解
这篇文章主要介绍了AngularJS基于factory创建自定义服务的方法,结合实例形式分析了AngularJS使用factory创建自定义服务的具体步骤、操作技巧与相关注意事项,需要的朋友可以参考下2017-05-05
ionic4+angular7+cordova上传图片功能的实例代码
ionic是一个垮平台开发框架,可通过web技术开发出多平台的应用。这篇文章主要介绍了ionic4+angular7+cordova上传图片功能,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值 ,需要的朋友可以参考下2019-06-06
利用VS Code开发你的第一个AngularJS 2应用程序
这篇文章主要给大家介绍了关于利用VS Code如何开发你的第一个AngularJS 2应用程序的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友下面来一起看看吧。2017-12-12


最新评论