在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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持小牛知识库。
问题内容: 任何人都可以为该JSFiddle提供正确的方法: JsFiddle链接 我正在尝试通过.class&#ID更改元素的类。 提前致谢 感谢tymeJV,新的JSFiddle: 解 问题答案: 正确的方法是根据切换变量使用,请考虑: CSS: JS: HTML: 通过根据变量(“ toggle”)是否为或分配引用的类(在上面为“红色”)来工作。
问题内容: 我正在尝试使用切换元素的类 isAutoScroll(): 基本上,如果为true,我希望ng-class是,如果为false,我希望它为 我现在无法使用,并且在控制台中产生此错误 如何正确执行此操作? 编辑 解决方案1 :(已过时) 编辑2 解决方案2: 我想更新解决方案,因为Stewie提供的应该是使用的一种。对于三元运算符,这是最标准的(对我而言,最容易阅读)。解决方案是 转
本文向大家介绍详解AngularJS ng-class样式切换,包括了详解AngularJS ng-class样式切换的使用技巧和注意事项,需要的朋友参考一下 整理文档,搜刮出一个详解AngularJS ng-class样式切换,稍微整理精简一下做下分享。 1、HTML 2、controller 3、效果图 4、循环列表,判断索引添加样式 *、 以上就是本文的全部内容,希望对大家的学习有所帮助,也
问题内容: “活动”类的CSS来自引导程序。 因此,切换作品几乎是我想要的。我希望它类似于导航链接中的活动状态,但在我的示例中,它处理图像,因此需要担心url字符串等。 我尝试模拟此示例,但没有用(我尝试了相同的图像逻辑):ng-class突出显示基于ng- repeat的活动菜单项,如果有人能指出我正确的方向,我将不胜感激。:D 问题答案: 在您遇到的情况下,我要做的是在ng-repeat的父范
问题内容: 为了使AngularJS在IE7和IE8中工作,我向ng-app元素添加了id =“ ng-app”和class =“ ng-app”: 过去一直如此,但是现在我将class =“ ng-app”添加到了两个不同的项目中,并且在这两个视图中不再在任何浏览器中呈现该视图。IE7 / 8兼容性的方式已更改吗?我正在使用CDN的1.0.2版本。 谢谢。 问题答案: 编辑说明: 添加docty
本章将讨论toggleClass()方法,它是一个有用的新操作类。 toggleClass()方法从匹配元素集中的每个元素添加或删除一个或多个类。 语法 (Syntax) 在jQueryUI的1.0版中添加 toggleClass()方法的基本语法如下 - .toggleClass( className [, switch ] [, duration ] [, easing ] [, comple