详解AngularJS ng-class样式切换


Posted in Javascript onJune 27, 2017

整理文档,搜刮出一个详解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">First</div> 
      <div ng-class="{true: 'bgstyle-check', false: 'bgstyle'}[isSecond]" ng-click="isSecond = !isSecond">Second</div> 
      <div ng-class="{true: 'bgstyle-check', false: 'bgstyle'}[isThird]" ng-click="isThird = !isThird">Third</div> 
    </div> 
    <br><br> 
    <div class="button-bar"> 
      <div ng-class="{true: 'bgstyle-check', false: 'bgstyle'}[hasAll]" ng-click="toggleAll()">All</div> 
      <div ng-class="{true: 'bgstyle-check', false: 'bgstyle'}[hasFirst]" ng-click="toggleFirst()">First</div> 
      <div ng-class="{true: 'bgstyle-check', false: 'bgstyle'}[hasSecond]" ng-click="toggleSecond()">Second</div> 
      <div ng-class="{true: 'bgstyle-check', false: 'bgstyle'}[hasThird]" ng-click="toggleThird()">Third</div> 
    </div> 
  </ion-content> 
</ion-view> 
<style> 
  .bgstyle {background-color: #8f8f8f;width: 100%;height: 20px;margin: 2px 0 2px 0;text-align: center;} 
  .bgstyle-check {background-color: #ff3b30;width: 100%;height: 20px;margin: 2px 0 2px 0;text-align: center;} 
</style>

2、controller

appControllers.controller('TestlCtrl', function ($scope, $state) { 
  $scope.isFirst = false; 
  $scope.isSecond = false; 
  $scope.isThird = false; 
 
 
  $scope.hasAll = false; 
  $scope.hasFirst = false; 
  $scope.hasSecond = false; 
  $scope.hasThird = false; 
 
  $scope.toggleAll = function () { 
    $scope.hasAll = !$scope.hasAll; 
    console.log($scope.hasAll); 
    var dynamicValue = $scope.hasAll; 
    $scope.hasFirst = dynamicValue; 
    $scope.hasSecond = dynamicValue; 
    $scope.hasThird = dynamicValue; 
  } 
 
  $scope.toggleFirst = function () { 
    $scope.hasFirst = !$scope.hasFirst; 
    checkAll(); 
  } 
 
  $scope.toggleSecond = function () { 
    $scope.hasSecond = !$scope.hasSecond; 
    checkAll(); 
  } 
 
  $scope.toggleThird = function () { 
    $scope.hasThird = !$scope.hasThird; 
    checkAll(); 
  } 
 
  function checkAll() { 
    if ($scope.hasFirst == true && $scope.hasSecond == true && $scope.hasThird == true) { 
      console.log("123ok"); 
      $scope.hasAll = true; 
    } else { 
      console.log("123no"); 
      $scope.hasAll = false; 
    } 
 
  } 
})

3、效果图

详解AngularJS ng-class样式切换

4、循环列表,判断索引添加样式

<div class="category-tab "> 
  <ul> 
    <li ng-repeat="item in rootList" ng-class="{true: 'cur', false: ''}[$index+1===1]"> 
      <a href="">{{item.CategoryName}}</a> 
    </li> 
    <li><a href="">热门推荐</a></li> 
    <li><a href="">热门推荐</a> </li> 
  </ul> 
</div>

*、

<ion-item class="item-divider"> 
  <i ng-class="{true: 'icon ion-tips mr10', false: 'iconfont icon-shangdian text-orange mr10'}[item.VendorId==0]"> 
    <element ng-show="item.VendorId==0">合作</element></i>{{item.VendorName}} 
</ion-item>

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

Javascript 相关文章推荐
js中哈希表的几种用法总结
Jan 28 Javascript
jQuery中next()方法用法实例
Jan 07 Javascript
jQuery中outerHeight()方法用法实例
Jan 19 Javascript
AngularJs根据访问的页面动态加载Controller的解决方案
Feb 04 Javascript
JavaScript对象属性检查、增加、删除、访问操作实例
Jul 08 Javascript
jquery+css实现的红色线条横向二级菜单效果
Aug 22 Javascript
JavaScript各类型的关系图解
Oct 16 Javascript
jQuery实现的网页换肤效果示例
Sep 20 Javascript
详解自定义ajax支持跨域组件封装
Feb 08 Javascript
微信小程序tabbar底部导航
Nov 05 Javascript
vue实现图片懒加载的方法分析
Feb 05 Javascript
jQuery实现放大镜案例
Oct 19 jQuery
各种选择框jQuery的选中方法(实例讲解)
Jun 27 #jQuery
JavaScript事件方法(实例讲解)
Jun 27 #Javascript
简单谈谈原生js的math对象
Jun 27 #Javascript
Vue.js实现一个todo-list的上移下移删除功能
Jun 26 #Javascript
AngularJS 最常用的八种功能(基础知识)
Jun 26 #Javascript
基于jQuery封装的分页组件
Jun 26 #jQuery
深入理解Angular中的依赖注入
Jun 26 #Javascript
You might like
php上传文件的增强函数
2010/07/21 PHP
一个完整的php文件上传类实例讲解
2015/10/27 PHP
php静态成员方法和静态的成员属性的使用方法
2017/10/26 PHP
JS实现浏览器菜单命令
2006/09/05 Javascript
javascript 日历提醒系统( 兼容所有浏览器 )
2009/04/07 Javascript
JavaScript 拾漏补遗
2009/12/27 Javascript
JavaScript 对象的属性和方法4种不同的类型
2010/03/19 Javascript
浅析document.createDocumentFragment()与js效率
2013/07/08 Javascript
详谈javascript中DOM的基本属性
2015/02/26 Javascript
深入浅出分析javaScript中this用法
2015/05/09 Javascript
jQuery实用技巧必备(中)
2015/11/03 Javascript
vue2.0项目实现路由跳转的方法详解
2018/06/21 Javascript
element-ui上传一张图片后隐藏上传按钮功能
2019/05/22 Javascript
浅谈Vue的响应式原理
2019/05/30 Javascript
Ajax请求时无法重定向的问题解决代码详解
2019/06/21 Javascript
Vue自定义render统一项目组弹框功能
2020/06/07 Javascript
ES11屡试不爽的新特性,你用上了几个
2020/10/21 Javascript
[01:12:40]DOTA2-DPC中国联赛 正赛 DLG vs XG BO3 第三场 1月25日
2021/03/11 DOTA
python网络爬虫采集联想词示例
2014/02/11 Python
python使用any判断一个对象是否为空的方法
2014/11/19 Python
Python多线程编程(四):使用Lock互斥锁
2015/04/05 Python
详解Python字符串对象的实现
2015/12/24 Python
Python文件操作之合并文本文件内容示例代码
2017/09/19 Python
使用Python控制摄像头拍照并发邮件
2019/04/23 Python
selenium+PhantomJS爬取豆瓣读书
2019/08/26 Python
Python socket模块方法实现详解
2019/11/05 Python
Python通过递归获取目录下指定文件代码实例
2019/11/07 Python
Python 实现将数组/矩阵转换成Image类
2020/01/09 Python
Python接口自动化测试的实现
2020/08/28 Python
Python tkinter制作单机五子棋游戏
2020/09/14 Python
课程设计心得体会
2013/12/28 职场文书
个人剖析材料范文
2014/09/30 职场文书
顶岗实习协议书
2015/01/29 职场文书
股东合作协议书模板2篇
2019/11/05 职场文书
仅用一句SQL更新整张表的涨跌幅、涨跌率的解决方案
2021/05/06 MySQL
React中的Context应用场景分析
2021/06/11 Javascript