小程序社区团购系统_angularJs的ng

2021-01-11 16:52

angularJs的ng-class切换class       这篇文章主要介绍了angularJs的ng-class切换class,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

字符串数组形式

字符串数组形式是针对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 

span ng- ng-click="isActive=true" 赛事介绍 /span span ng-class="{btn02: 'true ', hover: !isActive}" ng-click="isActive=false" 赛事合作 /span

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

 span ng- ng-click="isActive=true" 赛事介绍 /span 
 span ng-class="{btn02: 'true ', hover: !isActive}" ng-click="isActive=false" 赛事合作 /span 
 div ng-show="isActive" 
 div 
 p 学子易贷 span 杯赛事介绍 /span /p 
 p 此次联赛涵盖全国十个分赛区，分别为：北京、上海、广东、江苏、浙江、安徽、青岛、湖南、湖北、福建十个赛区。在赛期设置上分为春季赛、秋季赛和总决赛。其中春季赛所覆盖的赛区为：上海、江苏、浙江、安徽、青岛；秋季赛所覆盖赛区为：北京、广东、湖北、湖南、福建。 /p 
 p 校区赛： span 各校区附近网吧 /span 分区赛： span 网咖 /span 赛区赛： span 各赛区省会 /span 总决赛： span 上海 /span /p 
 /div 
 div 
 p span 4月8日-5月8日 /span span 5月21日-６月5日 /span span 6月10日-6月12日 /span span 2016年6月18日 /span /p 
 p span 校园赛时间 /span span 分区赛时间 /span span 赛区赛时间 /span span 总决赛时间 /span /p 
 /div 
 /div 
 div ng-show="isActive==false" 
 div 
 p 1.主办方：学子易贷 /p 
 p 2.协办方：无锡市电子竞技协会 /p 
 p 3.赞助方：..... /p 
 p 4.合作方：高校电竞社团 /p 
 备注：高校电竞社团与学子易贷达成合作意向并成功帮助学子易贷完成高校
 报名宣传以及后续工作可以登录学子易贷官网—“学子公益”申请社团活动
 资金1000元，并升级成为学子易贷的高校合作社团，每月享受600元的社
 团活动补助（寒暑假不享受）。
 /div 
 /div 

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