详解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 相关文章推荐
jQuery 获取浏览器所在的IP地址的小例子
Nov 08 Javascript
jQuery中:radio选择器用法实例
Jan 03 Javascript
JS判断页面是否出现滚动条的方法
Jul 17 Javascript
jQuery实现可以控制图片旋转角度效果(附demo源码下载)
Jan 27 Javascript
EasyUi combotree 实现动态加载树节点
Apr 01 Javascript
动态加载js、css的实例代码
May 26 Javascript
浅谈jQuery效果函数
Sep 16 Javascript
微信小程序 增、删、改、查操作实例详解
Jan 13 Javascript
vue2.0实战之基础入门(1)
Mar 27 Javascript
jQuery实现checkbox即点即改批量删除及中间遇到的坑
Nov 11 jQuery
vue动态绑定class选中当前列表变色的方法示例
Dec 19 Javascript
js、jquery实现列表模糊搜索功能过程解析
Mar 27 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版国家代码、缩写查询函数代码
2011/08/14 PHP
PHP类与对象中的private访问控制的疑问
2012/11/01 PHP
laravel学习教程之关联模型
2016/07/30 PHP
PHP封装返回Ajax字符串和JSON数组的方法
2017/02/17 PHP
PHP实现的mysql主从数据库状态检测功能示例
2017/07/20 PHP
PHP实现数组转JSon和JSon转数组的方法示例
2018/06/14 PHP
一个可绑定数据源的jQuery数据表格插件
2010/07/17 Javascript
jquery获取复选框被选中的值
2014/04/10 Javascript
JavaScript的jQuery库中function的存在和参数问题
2015/08/13 Javascript
IntersectionObserver实现图片懒加载的示例
2017/09/29 Javascript
微信小程序使用image组件显示图片的方法【附源码下载】
2017/12/08 Javascript
axios中cookie跨域及相关配置示例详解
2017/12/20 Javascript
Angular5中调用第三方库及jQuery的添加的方法
2018/06/07 jQuery
React组件重构之嵌套+继承及高阶组件详解
2018/07/19 Javascript
图片文字识别(OCR)插件Ocrad.js教程
2018/11/26 Javascript
JQuery Ajax执行跨域请求数据的解决方案
2018/12/10 jQuery
vue实现分环境打包步骤(给不同的环境配置相对应的打包命令)
2019/06/04 Javascript
vue仿淘宝滑动验证码功能(样式模仿)
2019/12/10 Javascript
深入了解JavaScript词法作用域
2020/07/29 Javascript
原生js实现简单轮播图
2020/10/26 Javascript
Python 连连看连接算法
2008/11/22 Python
Python入门篇之编程习惯与特点
2014/10/17 Python
Python+微信接口实现运维报警
2016/08/27 Python
Python使用cx_Oracle模块操作Oracle数据库详解
2018/05/07 Python
pandas修改DataFrame列名的实现方法
2019/02/22 Python
Python Django 前后端分离 API的方法
2019/08/28 Python
利用python实现冒泡排序算法实例代码
2019/12/01 Python
Python 捕获代码中所有异常的方法
2020/08/03 Python
跟单文员岗位职责
2014/01/03 职场文书
精彩的演讲稿开头
2014/05/08 职场文书
售后客服工作职责
2014/06/16 职场文书
物流专业求职信
2014/06/30 职场文书
2014年幼儿园教学工作总结
2014/12/04 职场文书
业务员岗位职责
2015/02/03 职场文书
公司借条范本
2015/05/25 职场文书
家长对学校的意见和建议
2015/06/03 职场文书