angularJs的ng-class切换class

在angular中为我们提供了3种方案处理class：

1：scope变量绑定

2：字符串数组形式。

3：对象key/value处理。

第一种我们不推荐使用，看看其他两种解决方案：

字符串数组形式

字符串数组形式是针对class简单变化，具有排斥性的变化，true是什么class，false是什么class，其形如;

赛事介绍 
赛事合作

var app = angular.module('myApp', []);

app.controller('tabCtr', function ($scope) { 
  //$scope.data = {}; 
  //$scope.data.show = true;//初始化scope下的变量

  $scope.isActive = true; 
  
})

对象key/value处理

赛事介绍 
赛事合作

var app = angular.module('myApp', []);

app.controller('tabCtr', function ($scope) { 
  //$scope.data = {}; 
  //$scope.data.show = true;//初始化scope下的变量

  $scope.isActive = true; 
  
})

配合ng-show实现tab切换功能

赛事介绍
赛事合作


              


                
学子易贷杯赛事介绍
                
此次联赛涵盖全国十个分赛区，分别为：北京、上海、广东、江苏、浙江、安徽、青岛、湖南、湖北、福建十个赛区。在赛期设置上分为春季赛、秋季赛和总决赛。其中春季赛所覆盖的赛区为：上海、江苏、浙江、安徽、青岛；秋季赛所覆盖赛区为：北京、广东、湖北、湖南、福建。
                
校区赛：各校区附近网吧 分区赛：网咖 赛区赛：各赛区省会 总决赛：上海
              
              

                
4月8日-5月8日5月21日-６月5日6月10日-6月12日2016年6月18日
                
校园赛时间分区赛时间赛区赛时间总决赛时间
              
            
            

              

                
1.主办方：学子易贷
                
2.协办方：无锡市电子竞技协会
                
3.赞助方：.....
                
4.合作方：高校电竞社团
                

                  备注：高校电竞社团与学子易贷达成合作意向并成功帮助学子易贷完成高校
                    报名宣传以及后续工作可以登录学子易贷官网―“学子公益”申请社团活动
                    资金1000元，并升级成为学子易贷的高校合作社团，每月享受600元的社
                    团活动补助（寒暑假不享受）。
                
              

            

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