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类中定义原型方法的两种实现的区别
Mar 08 Javascript
Add Formatted Data to a Spreadsheet
Jun 12 Javascript
Javascript 文件夹选择框的两种解决方案
Jul 01 Javascript
jQuery插件expander实现图片翻转特效
May 21 Javascript
基于BootStrap Metronic开发框架经验小结【八】框架功能总体界面介绍
May 12 Javascript
全面解析bootstrap格子布局
May 22 Javascript
javascript验证手机号和实现星号(*)代替实例
Aug 16 Javascript
AngularJs bootstrap详解及示例代码
Sep 01 Javascript
基于Bootstrap 3 JQuery及RegExp的表单验证功能
Feb 16 Javascript
详解如何构建一个Angular6的第三方npm包
Sep 07 Javascript
在Vue-cli里应用Vuex的state和mutations方法
Sep 16 Javascript
浅谈Vue数据响应
Nov 05 Javascript
关于使用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中操作ini配置文件的方法
2013/04/25 PHP
PHP 使用 Imagick 裁切/生成缩略图/添加水印自动检测和处理 GIF
2016/02/19 PHP
php使用正则表达式去掉html中的注释方法
2016/11/03 PHP
PHP+MySql实现一个简单的留言板
2020/07/19 PHP
用Jquery.load载入页面后样式没了页面混乱的解决方法
2014/10/20 Javascript
Javascript基础教程之数组 array
2015/01/18 Javascript
浅谈Node.js中的定时器
2015/06/18 Javascript
AngularJS中如何使用$http对MongoLab数据表进行增删改查
2016/01/23 Javascript
基于jquery实现轮播特效
2016/04/22 Javascript
JS控制弹出悬浮窗口(一览画面)的实例代码
2016/05/30 Javascript
weUI应用之JS常用信息提示弹层的封装
2016/11/21 Javascript
简述Angular 5 快速入门
2017/11/04 Javascript
Vue引用Swiper4插件无法重写分页器样式的解决方法
2018/09/27 Javascript
使用mixins实现elementUI表单全局验证的解决方法
2019/04/02 Javascript
vue cli 3.0 搭建项目的图文教程
2019/05/17 Javascript
微信小程序开发注意指南和优化实践(小结)
2019/06/21 Javascript
jenkins自动构建发布vue项目的方法步骤
2021/01/04 Vue.js
[42:39]老党炸弹人试玩视频
2014/09/03 DOTA
独特的python循环语句
2016/11/20 Python
Python实现 多进程导入CSV数据到 MySQL
2017/02/26 Python
Python数据结构与算法之二叉树结构定义与遍历方法详解
2017/12/12 Python
python机器学习实战之K均值聚类
2017/12/20 Python
django启动uwsgi报错的解决方法
2018/04/08 Python
在Python中过滤Windows文件名中的非法字符方法
2019/06/10 Python
python  文件的基本操作 菜中菜功能的实例代码
2019/07/17 Python
python argparse模块通过后台传递参数实例
2020/04/20 Python
pycharm远程连接vagrant虚拟机中mariadb数据库
2020/06/05 Python
paramiko使用tail实时获取服务器的日志输出详解
2020/12/06 Python
在线实验室测试:HealthLabs.com
2020/05/03 全球购物
平面设计师工作职责范文
2013/12/03 职场文书
优秀实习自我鉴定
2013/12/04 职场文书
继电保护工岗位职责
2014/01/05 职场文书
中专生自荐信
2014/06/25 职场文书
委托函范文
2015/01/29 职场文书
2015年乡镇残联工作总结
2015/05/13 职场文书
手把手教你用SpringBoot将文件打包成zip存放或导出
2021/06/11 Java/Android