网络编程 
首页 > 网络编程 > 浏览文章

angularJs的ng-class切换class

(编辑:jimmy 日期: 2024/11/16 浏览:3 次 )

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

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

上一篇:详谈表单格式化插件jquery.serializeJSON
下一篇:关于使用js算总价的问题
一句话新闻
微软与英特尔等合作伙伴联合定义“AI PC”:键盘需配有Copilot物理按键
几个月来,英特尔、微软、AMD和其它厂商都在共同推动“AI PC”的想法,朝着更多的AI功能迈进。在近日,英特尔在台北举行的开发者活动中,也宣布了关于AI PC加速计划、新的PC开发者计划和独立硬件供应商计划。
在此次发布会上,英特尔还发布了全新的全新的酷睿Ultra Meteor Lake NUC开发套件,以及联合微软等合作伙伴联合定义“AI PC”的定义标准。
友情链接:杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网 网站地图 SiteMap