angularJs的ng-class切换class


Posted in Javascript onJune 23, 2017

在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切换功能

angularJs的ng-class切换class

angularJs的ng-class切换class

<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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
XML的代替者----JSON
Jul 21 Javascript
提升你网站水平的jQuery插件集合推荐
Apr 19 Javascript
JS 进度条效果实现代码整理
May 21 Javascript
深入理解javascript动态插入技术
Nov 12 Javascript
一个字符串反转函数可实现字符串倒序
Sep 15 Javascript
jQuery搜索同辈元素方法
Feb 10 Javascript
js动态修改表格行colspan列跨度的方法
Mar 30 Javascript
JavaScript 闭包详细介绍
Sep 28 Javascript
深入理解Javascript箭头函数中的this
Feb 13 Javascript
Vue.js实现移动端短信验证码功能
Mar 29 Javascript
浅谈Express异步进化史
Sep 09 Javascript
原生JS封装vue Tab切换效果
Apr 28 Vue.js
关于使用js算总价的问题
Jun 23 #Javascript
angular select 默认值设置方法
Jun 23 #Javascript
获取当前按钮或者html的ID名称实例(推荐)
Jun 23 #Javascript
小发现之浅谈location.search与location.hash的问题
Jun 23 #Javascript
微信JS SDK接入的几点注意事项(必看篇)
Jun 23 #Javascript
简单谈谈require模块化jquery和angular的问题
Jun 23 #jQuery
详解vuejs之v-for列表渲染
Jun 22 #Javascript
You might like
在PHP3中实现SESSION的功能(一)
2006/10/09 PHP
细谈php中SQL注入攻击与XSS攻击
2012/06/10 PHP
php多个字符串替换成同一个的解决方法
2013/06/18 PHP
php addslashes 利用递归实现使用反斜线引用字符串
2013/08/05 PHP
php的sprintf函数的用法 控制浮点数格式
2014/02/14 PHP
jquery 可拖拽的窗体控件实现代码
2010/03/21 Javascript
可以将word转成html的js代码
2010/04/11 Javascript
jQuery学习笔记之jQuery的动画
2010/12/22 Javascript
jquery实现marquee效果(文字或者图片的水平垂直滚动)
2013/01/07 Javascript
javascript实现checkBox的全选,反选与赋值
2015/03/12 Javascript
js跨域请求的5中解决方式
2015/07/02 Javascript
jQuery超简单选项卡完整实例
2015/09/26 Javascript
JavaScript小技巧整理篇(非常全)
2016/01/26 Javascript
AngularJs 国际化(I18n/L10n)详解
2016/09/01 Javascript
vue.js中指令Directives详解
2017/03/20 Javascript
JS switch判断 三目运算 while 及 属性操作代码
2017/09/03 Javascript
详解VUE2.X过滤器的使用方法
2018/01/11 Javascript
浅谈VUE监听窗口变化事件的问题
2018/02/24 Javascript
karma+webpack搭建vue单元测试环境的方法示例
2018/05/24 Javascript
vue中$nextTick的用法讲解
2019/01/17 Javascript
在Mac OS系统上安装Python的Pillow库的教程
2015/11/20 Python
pandas object格式转float64格式的方法
2018/04/10 Python
Python构建图像分类识别器的方法
2019/01/12 Python
在python中修改.properties文件的操作
2020/04/08 Python
matplotlib绘制多子图共享鼠标光标的方法示例
2021/01/08 Python
Python操作Excel的学习笔记
2021/02/18 Python
CSS3 2D模拟实现摩天轮旋转效果
2016/11/16 HTML / CSS
HTML5 window/iframe跨域传递消息 API介绍
2013/08/26 HTML / CSS
ONLY德国官方在线商店:购买时尚女装
2017/09/21 全球购物
计算机专业自我鉴定
2013/10/15 职场文书
大一期末自我鉴定
2013/12/13 职场文书
群众路线学习笔记范文
2014/11/06 职场文书
巾帼标兵事迹材料
2014/12/26 职场文书
工作收入证明范本
2015/06/12 职场文书
pt-archiver 主键自增
2022/04/26 MySQL
Win11远程连接不上怎么办?Win11远程桌面用不了的解决方法
2022/08/05 数码科技