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 相关文章推荐
判断滚动条到底部的JS代码
Nov 04 Javascript
JQueryiframe页面操作父页面中的元素与方法(实例讲解)
Nov 19 Javascript
详解node服务器中打开html文件的两种方法
Sep 18 Javascript
js插件实现图片滑动验证码
Sep 29 Javascript
vue组件生命周期详解
Nov 07 Javascript
使用JS模拟锚点跳转的实例
Feb 01 Javascript
微信小程序页面传多个参数跳转页面的实现方法
May 17 Javascript
Angular8 实现table表格表头固定效果
Jan 03 Javascript
JavaScript设计模式之门面模式原理与实现方法分析
Mar 09 Javascript
简单了解Vue + ElementUI后台管理模板
Apr 07 Javascript
JavaScript实现鼠标移入随机变换颜色
Nov 24 Javascript
vue3.0中setup使用(两种用法)
Dec 02 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
PHP基于单例模式实现的mysql类
2016/01/09 PHP
利用PHP实现开心消消乐的算法示例
2017/10/12 PHP
ThinkPHP5 的简单搭建和使用详解
2018/11/15 PHP
JS event使用方法详解
2008/04/28 Javascript
js中获取事件对象的方法小结
2011/03/13 Javascript
前台js改变Session的值(用ajax实现)
2012/12/28 Javascript
JavaScript 实现类的多种方法实例
2013/05/01 Javascript
使用百度地图api实现根据地址查询经纬度
2014/12/11 Javascript
js进行表单验证实例分析
2015/02/10 Javascript
浅谈EasyUI中编辑treegrid的方法
2015/03/01 Javascript
javascript中setTimeout使用指南
2015/07/26 Javascript
详解JavaScript的闭包、IIFE、apply、函数与对象
2016/12/21 Javascript
jquery使用EasyUI Tree异步加载JSON数据(生成树)
2017/02/11 Javascript
原生JS实现垂直手风琴效果
2017/02/19 Javascript
jQuery基本选择器和层次选择器学习使用
2017/02/27 Javascript
ES6中let 和 const 的新特性
2018/09/03 Javascript
vue-cli3项目展示本地Markdown文件的方法
2019/06/07 Javascript
微信小程序如何访问公众号文章
2019/07/08 Javascript
Vue 实现前端权限控制的示例代码
2019/07/09 Javascript
[48:28]完美世界DOTA2联赛循环赛FTD vs Magma第二场 10月30日
2020/10/31 DOTA
python 实现插入排序算法
2012/06/05 Python
Python实现的数据结构与算法之双端队列详解
2015/04/22 Python
详解python tkinter教程-事件绑定
2019/03/28 Python
Python 2/3下处理cjk编码的zip文件的方法
2019/04/26 Python
Python Sympy计算梯度、散度和旋度的实例
2019/12/06 Python
旅游项目开发策划书
2014/01/18 职场文书
留学顾问岗位职责
2014/04/14 职场文书
小学优秀班干部事迹材料
2014/05/25 职场文书
党员学习党的群众路线思想汇报(5篇)
2014/09/10 职场文书
搞笑的爱情检讨书
2014/10/01 职场文书
学生检讨书怎么写
2014/10/09 职场文书
2015年社区教育工作总结
2015/05/13 职场文书
企业安全隐患排查治理制度
2015/08/05 职场文书
2016应届毕业生就业指导课心得体会
2016/01/15 职场文书
珍惜时间的诗歌赏析
2019/08/23 职场文书
Spring Boot 排除某个类加载注入IOC的操作
2021/08/02 Java/Android