详解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几个验证函数代码
Mar 25 Javascript
JS页面延迟执行一些方法(整理)
Nov 11 Javascript
javascript常见操作汇总
Sep 03 Javascript
jQuery实现多按钮单击变色
Nov 27 Javascript
jQuery插件jcrop+Fileapi完美实现图片上传+裁剪+预览的代码分享
Apr 22 Javascript
js控制div弹出层实现方法
May 11 Javascript
jQuery包裹节点用法完整示例
Sep 13 Javascript
Js实现京东无延迟菜单效果实例(demo)
Jun 02 Javascript
详解vue项目优化之按需加载组件-使用webpack require.ensure
Jun 13 Javascript
浅谈Vue 性能优化之深挖数组
Dec 11 Javascript
layui 弹出删除确认界面的实例
Sep 06 Javascript
vue使用transition组件动画效果的实例代码
Jan 28 Vue.js
各种选择框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静态方法及普通方法的区别
2016/10/04 PHP
PHP中SQL查询语句的id=%d解释(推荐)
2016/12/10 PHP
微博@符号的用户名提示效果。(想@到谁?)
2010/11/05 Javascript
原生JS实现加入收藏夹的代码
2013/10/24 Javascript
js将json格式内容转换成对象的方法
2013/11/01 Javascript
JS获取地址栏参数的几种方法小结
2014/02/28 Javascript
javascript实现左右控制无缝滚动
2014/12/31 Javascript
Perl Substr()函数及函数的应用
2015/12/16 Javascript
一种新的javascript对象创建方式Object.create()
2015/12/28 Javascript
修改UA在PC中访问只能在微信中打开的链接方法
2017/11/27 Javascript
NodeJs之word文件生成与解析的实现代码
2019/04/01 NodeJs
layui 阻止图片上传的实例(before方法)
2019/09/26 Javascript
处理JavaScript值为undefined的7个小技巧
2020/07/28 Javascript
微信小程序:报错(in promise) MiniProgramError
2020/10/30 Javascript
nginx配置域名后的二级目录访问不同项目的配置操作
2020/11/06 Javascript
Python正则表达式介绍
2012/08/06 Python
python操作摄像头截图实现远程监控的例子
2014/03/25 Python
Python使用metaclass实现Singleton模式的方法
2015/05/05 Python
Django模板变量如何传递给外部js调用的方法小结
2017/07/24 Python
python thrift搭建服务端和客户端测试程序
2018/01/17 Python
python获取服务器响应cookie的实例
2018/12/28 Python
selenium跳过webdriver检测并模拟登录淘宝
2019/06/12 Python
wxPython绘图模块wxPyPlot实现数据可视化
2019/11/19 Python
解决TensorFlow模型恢复报错的问题
2020/02/06 Python
使用python创建Excel工作簿及工作表过程图解
2020/05/27 Python
keras model.fit 解决validation_spilt=num 的问题
2020/06/19 Python
Python基于正则表达式实现计算器功能
2020/07/13 Python
python绘制趋势图的示例
2020/09/17 Python
美国宠物护理专家:Revival Animal Health
2020/01/05 全球购物
在C中是否有模拟继承等面向对象程序设计特性的好方法
2012/05/22 面试题
服务员岗位责任制
2014/02/11 职场文书
父亲去世追悼词
2015/06/23 职场文书
Python中os模块的简单使用及重命名操作
2021/04/17 Python
Redis可视化客户端小结
2021/06/10 Redis
nginx作grpc的反向代理踩坑总结
2021/07/07 Servers
python 判断字符串当中是否包含字符(str.contain)
2022/06/01 Python