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日-６月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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • AngularJS中关于ng-class指令的几种实现方式详解

    前言 开发中经常会遇到这样的需求,一个元素需要在不同的状态下呈现不同的样子,而在这所谓的的样子当然就是改变其css的属性,而实现动态的改变属性值,我们就需要实现动态的更换其class属性值. 在这给大家介绍三种方法来实现,大家可以根据自己的需求来选择方式,下面来看看. 第一种:通过数据的双向绑定(不推荐) <div ng-controller="firstController"> <div ng-class="{{className}}">&

  • AngularJS中ng-class用法实例分析

    本文实例讲述了AngularJS中ng-class用法.分享给大家供大家参考,具体如下: 使用 ng-class 动态设置元素的类,方法是绑定一个代表所有需要添加的类的表达式.重复的类不会添加.当表达式发生变化,先前添加的类会被移除,新类会被添加. 在angular中为我们提供了3种方案: ① 通过数据的双向绑定(不推荐使用) ② 通过对象数组. ③ 通过key/value 一.通过数据双向绑定: function changeClass(){ $scope.className = "chang

  • AngularJS基础 ng-class-odd 指令示例

    AngularJS ng-class-odd 指令 AngularJS 实例 为表格的奇数行设置 class="striped": <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"><

  • 详解AngularJS ng-class样式切换

    详解AngularJS ng-class样式切换

    整理文档,搜刮出一个详解AngularJS ng-class样式切换,稍微整理精简一下做下分享. 1.HTML <ion-view> <ion-content> <div class="button-bar"> <div ng-class="{true: 'bgstyle-check', false: 'bgstyle'}[isFirst]" ng-click="isFirst = !isFirst"&g

  • AngularJS使用ng-class动态增减class样式的方法示例

    本文实例讲述了AngularJS使用ng-class动态增减class样式的方法.分享给大家供大家参考,具体如下: 使用ng-class可以实现动态地增减样式: <!DOCTYPE html> <html ng-app="formExample"> <head> <meta charset="UTF-8"> <title></title> <script src="../js/a

  • AngularJS 基础ng-class-even指令用法

    AngularJS ng-class-even 指令 AngularJS 实例 为表格的偶数行设置 class="striped": <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js">&l

  • AngularJS入门教程之ng-class 指令用法

    AngularJS ng-class 指令 AngularJS 实例 修改 <div> 元素的类: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> <sty

  • 浅谈AngularJS中ng-class的使用方法

    有三种方法: 1.通过$scope绑定(不推荐) 2.通过对象数组绑定 3.通过key/value键值对绑定 实现方法: 1.通过$scope绑定(不推荐): function ctrl($scope) { $scope.className = "selected"; } <div class="{{className}}"></div> 2.通过对象数组绑定: function ctrl($scope) { $scope.isSelecte

  • 详解angularJs中关于ng-class的三种使用方式说明

    在开发中我们通常会遇到一种需求:一个元素在不同的状态需要展现不同的样子. 而在这所谓的样子当然就是改变其css的属性,而实现能动态的改变其属性值,必然只能是更换其class属性 这里有三种方法: 第一种:通过数据的双向绑定(不推荐) 第二种:通过对象数组 第三种:通过key/value( 推荐 ) 下面简单说下这三种: 第一种:通过数据的双向绑定 实现方式: function changeClass(){ $scope.className = "change2"; } <div

  • AngularJS实现使用路由切换视图的方法

    本文实例讲述了AngularJS实现使用路由切换视图的方法.分享给大家供大家参考,具体如下: 下面是一个简单的学生信息管理实例. 注意:除了引用angular.js之外,还要引用angular-route.js. 1.创建index.html主视图 在index.html主视图中,我们将会把多个视图共有的东西都放在里面,例如菜单.在这个例子中,我们仅仅把应用的标题放在里面,然后再用ng-view指令来告诉Angular把视图显示在哪儿. <!DOCTYPE html> <html xml

  • AngularJS解决ng界面长表达式(ui-set)的方法分析

    本文实例讲述了AngularJS解决ng界面长表达式(ui-set)的方法.分享给大家供大家参考,具体如下: 本文来自网友sun shine的问题,问题如下: 您好, 我想求教一个问题.     在$scope中我的对象名字写的特别深, 在 html中我又多次用到了同一个对象, 对不对在 html中让它绑定到一个临时变量呢?     比如:     $scope.this.is.a.very.deep.obj = {     'name': 'xxx',     'state': 'active

  • AngularJS的ng Http Request与response格式转换方法

    本文实例讲述了AngularJS的ng Http Request与response格式转换方法.分享给大家供大家参考,具体如下: angular作为Single Page Application推荐的交互方式当然是基于json的ajax调用.但今天要说的是当你不幸工作在一个遗留或者不可控制的服务上,而这服务是基于非json提交方式(或许是常规表单(form)提交,或者其他自定义数据格式),那么我们只能改变ng内部$http默认request/response格式转化方式. 所幸的是ng $htt

  • angularjs实现Tab栏切换效果

    angularjs实现Tab栏切换效果

    本文实例为大家分享了angularjs实现Tab栏切换效果的具体代码,供大家参考,具体内容如下 如图所示 选中后提交的实例代码: <!DOCTYPE html> <html lang="en" ng-app="myApp">     <head>         <meta charset="utf-8">         <script type="text/javascript&

  • 在React框架中实现一些AngularJS中ng指令的例子

    首先设定一段Angularjs代码的ng-class: <i class="header-help-icon down" ng-class="{up:showMenu}"></i> 比较容易理解的Angularjs ng-class设置样式代码,那我们使用React怎么去实现它呢? 首先在state设置一个变量比如: isShowLoginMenu,在不同场景改变它的值,然后在绑定在class样式上面 <i className={&qu

  • AngularJS标签页tab选项卡切换功能经典实例详解

    AngularJS标签页tab选项卡切换功能经典实例详解

    本文实例讲述了AngularJS实现标签页tab选项卡功能.分享给大家供大家参考,具体如下: 选项卡一: JavaScript+html+css <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>www.jb51.net js标签页tab切换</title> <style> #div1 .active{ background:blue

  • AngularJS 整理一些优化的小技巧

    关于优化ng的手段网上已经有很多了,核心都是从$$watchers这个作用域内部属性说起的,今天我来说点别的,本质还是不变的,因为这是ng的硬伤,不过我相信只要运用合适的手法,这些问题还是可以避免的. ng简介 angularjs简称ng,是google出品的mvvm框架,此在提高前端项目开发效率(实践中来看确实很能提高开发效率),以控制器,指令,服务来围绕整个项目,内部以独有的DI来解决三层之前的调用问题.更多的详情信息可以参考我之前写的ng源码分析. ng的硬伤 说到硬伤就要先说下它的简单的

  • angularjs的一些优化小技巧

    关于优化ng的手段网上已经有很多了,核心都是从$$watchers这个作用域内部属性说起的,今天我来说点别的,本质还是不变的,因为这是ng的硬伤,不过我相信只要运用合适的手法,这些问题还是可以避免的. ng简介 angularjs简称ng,是google出品的mvvm框架,此在提高前端项目开发效率(实践中来看确实很能提高开发效率),以控制器,指令,服务来围绕整个项目,内部以独有的DI来解决三层之前的调用问题.更多的详情信息可以参考我之前写的ng源码分析. ng的硬伤 说到硬伤就要先说下它的简单的

  • AngularJS入门教程之多视图切换用法示例

    AngularJS入门教程之多视图切换用法示例

    本文实例讲述了AngularJS多视图切换用法.分享给大家供大家参考,具体如下: 在AngularJS应用中,我们可以將html碎片写在一个单独的文件中,然后在其他页面中將该段碎片加载进来.如果有多个碎片文件,我们还可以在控制器中根据用户的操作动态的加载不同的碎片,从而达到切换视图的效果. 先来看看笔者写好的一个案例吧: 这两首词实际上是两个html碎片,分别写在page1.html和page2.html.下面是这两个文件的内容: <!--page1.html内容--> <div>

  • 用AngularJS的指令实现tabs切换效果

    用AngularJS的指令实现tabs切换效果

    先来看看效果图 首先先来说一下指令嵌套,指令嵌套顾名思义就是两个以上的指令嵌套在一起,比如下面这样: <A-deirective> <B-directive></B-directive> <C-directive></C-directive> </A-directive> 下面这个tabs功能的指令,刚好用到了这个,可以让代码更加简洁. <!DOCTYPE html> <html lang="en"

随机推荐