详解AngularJS ng-class样式切换

2024-04-26 10:25:27

整理文档，搜刮出一个详解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、效果图

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>

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

angularJs的ng-class切换class

在angular中为我们提供了3种方案处理class: 1:scope变量绑定 2:字符串数组形式. 3:对象key/value处理. 第一种我们不推荐使用,看看其他两种解决方案: 字符串数组形式字符串数组形式是针对class简单变化,具有排斥性的变化,true是什么class,false是什么class,其形如; <span ng-class="{true: 'btn01 hover', false: 'btn01'}[isActive]" ng-click="is
AngularJS中关于ng-class指令的几种实现方式详解

前言开发中经常会遇到这样的需求,一个元素需要在不同的状态下呈现不同的样子,而在这所谓的的样子当然就是改变其css的属性,而实现动态的改变属性值,我们就需要实现动态的更换其class属性值. 在这给大家介绍三种方法来实现,大家可以根据自己的需求来选择方式,下面来看看. 第一种:通过数据的双向绑定(不推荐) <div ng-controller="firstController"> <div ng-class="{{className}}">&
AngularJS基础 ng-class-odd 指令示例

AngularJS ng-class-odd 指令 AngularJS 实例为表格的奇数行设置 class="striped": <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"><
AngularJS入门教程之ng-class 指令用法

AngularJS ng-class 指令 AngularJS 实例修改 <div> 元素的类: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> <sty
AngularJS中ng-class用法实例分析

本文实例讲述了AngularJS中ng-class用法.分享给大家供大家参考,具体如下: 使用 ng-class 动态设置元素的类,方法是绑定一个代表所有需要添加的类的表达式.重复的类不会添加.当表达式发生变化,先前添加的类会被移除,新类会被添加. 在angular中为我们提供了3种方案: ① 通过数据的双向绑定(不推荐使用) ② 通过对象数组. ③ 通过key/value 一.通过数据双向绑定: function changeClass(){ $scope.className = "chang
AngularJS使用ng-class动态增减class样式的方法示例

本文实例讲述了AngularJS使用ng-class动态增减class样式的方法.分享给大家供大家参考,具体如下: 使用ng-class可以实现动态地增减样式: <!DOCTYPE html> <html ng-app="formExample"> <head> <meta charset="UTF-8"> <title></title> <script src="../js/a
详解angularJs中关于ng-class的三种使用方式说明

在开发中我们通常会遇到一种需求:一个元素在不同的状态需要展现不同的样子. 而在这所谓的样子当然就是改变其css的属性,而实现能动态的改变其属性值,必然只能是更换其class属性这里有三种方法: 第一种:通过数据的双向绑定(不推荐) 第二种:通过对象数组第三种:通过key/value( 推荐 ) 下面简单说下这三种: 第一种:通过数据的双向绑定实现方式: function changeClass(){ $scope.className = "change2"; } <div
AngularJS 基础ng-class-even指令用法

AngularJS ng-class-even 指令 AngularJS 实例为表格的偶数行设置 class="striped": <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js">&l
浅谈AngularJS中ng-class的使用方法

有三种方法: 1.通过$scope绑定(不推荐) 2.通过对象数组绑定 3.通过key/value键值对绑定实现方法: 1.通过$scope绑定(不推荐): function ctrl($scope) { $scope.className = "selected"; } <div class="{{className}}"></div> 2.通过对象数组绑定: function ctrl($scope) { $scope.isSelecte
详解AngularJS ng-class样式切换

整理文档,搜刮出一个详解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"&g
详解angularjs获取元素以及angular.element()用法

本文介绍了详解angularjs获取元素以及angular.element()用法 ,分享给大家,具体如下: addClass()-为每个匹配的元素添加指定的样式类名 after()-在匹配元素集合中的每个元素后面插入参数所指定的内容,作为其兄弟节点 append()-在每个匹配元素里面的末尾处插入参数内容 attr() - 获取匹配的元素集合中的第一个元素的属性的值 bind() - 为一个元素绑定一个事件处理程序 children() - 获得匹配元素集合中每个元素的子元素,选择器选择性筛选
详解AngularJS中的表单验证(推荐)

AngularJS自带了很多验证,什么必填,最大长度,最小长度...,这里记录几个有用的正则式验证 1.使用angularjs的表单验证正则式验证只需要配置一个正则式,很方便的完成验证,理论上所有的验证都可以用正则式完成 //javascript $scope.mobileRegx = "^1(3[0-9]|4[57]|5[0-35-9]|7[01678]|8[0-9])\\d{8}$"; $scope.emailRegx = "^[a-z]([a-z0-9]*[-_]?
详解AngularJS中$filter过滤器使用(自定义过滤器)

1.内置过滤器 * $filter 过滤器,是angularJs中用来处理数据以更好的方式展示给我用户.比如格式化日期,转换大小写等等. * 过滤器即有内置过滤器也支持自定义过滤器.内置过滤器很多,可以百度.关键是如何使用: * 1.在HTML中直接使用内置过滤器 * 2.在js代码中使用内置过滤器 * 3.自定义过滤器 * * (1)常用内置过滤器 * number 数字过滤器,可以设置保留数字小数点后几位等 * date 时间格式化过滤器,可自己设置时间格式 * filter 过滤的数据一般
详解angularjs实现echart图表效果最简洁教程

本文介绍了详解angularjs实现echart图表效果最简洁教程,分享给大家,具体如下: ehcart是百度做的数据图表,基于原生js.接口和配置都写的很好很易读,还可以用于商用. 一 echart包引用下载解压,放入lib中. 下载地址:echart_jb51.rar 并在index.html中引用如图两个js文件. app.js中引用angular-echarts 二页面 html页面  <div> <donut-chart config=&quo
详解angularjs 学习之 scope作用域

简介 Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带. Scope 是一个存储应用数据模型的对象,有可用的方法和属性. Scope 可应用在视图和控制器上. 作用域是Web应用的控制器和视图之间的粘结剂: 控制器 --> 作用域 --> 视图(DOM) 指令 --> 作用域 --> 视图(DOM) 当你在 AngularJS 创建控制器时,你可以将 $scope 对象当作一个参数传递: <div ng-controller=
详解AngularJS实现表单验证

开始学习AngularJS表单验证: 常用的表单验证指令 1. 必填项验证某个表单输入是否已填写,只要在输入字段元素上添加HTML5标记required即可: 复制代码代码如下: <<input type="text" required /> 2. 最小长度验证表单输入的文本长度是否大于某个最小值,在输入字段上使用指令ng-minleng= "{number}": 复制代码代码如下: <<input type="tex
详解AngularJS验证、过滤器、指令

一.验证 angularJS中提供了许多的验证指令,可以轻松的实现验证,只需要在表单元素上添加相应的ng属性,常见的如下所示: <input Type="text" ng-model="" [name=""] [required=""] [ng-required=""] [ng-minlength=""] [ng-maxlength=""][ng-pattern
详解AngularJs中$sce与$sceDelegate上下文转义服务

一.严格的上下文转义服务严格的上下文转义(SCE)是一种需要在一定的语境中导致AngularJS绑定值被标记为安全使用语境的模式.由用户通过ng-bind-html绑定任意HTML语句就是这方面的一个例子.我们称这些上下文转义为特权或者SCE. 二.$sce $sce 服务是AngularJs提供的一种严格上下文转义服务. 下面代码是简化了的ngBindHtml实现(当然,这不是完整版ngBindHtml源码): var ngBindHtmlDirective = ['$sce', funct
详解AngularJS中自定义过滤器

过滤器(filter)正如其名,作用就是接收一个输入,通过某个规则进行处理,然后返回处理后的结果.主要用在数据的格式化上,例如获取一个数组中的子集,对数组中的元素进行排序等.ng内置了一些过滤器,它们是:currency(货币).date(日期).filter(子串匹配).json(格式化json对象).limitTo(限制个数).lowercase(小写).uppercase(大写).number(数字).orderBy(排序).总共九种.除此之外还可以自定义过滤器,这个就强大了,可以满足任何

详解AngularJS ng-class样式切换

相关推荐

随机推荐