详解angularJs中关于ng-class的三种使用方式说明

在开发中我们通常会遇到一种需求：一个元素在不同的状态需要展现不同的样子。

而在这所谓的样子当然就是改变其css的属性，而实现能动态的改变其属性值，必然只能是更换其class属性

这里有三种方法：

第一种：通过数据的双向绑定（不推荐）

第二种：通过对象数组

第三种：通过key/value( 推荐 )

下面简单说下这三种：

第一种：通过数据的双向绑定

实现方式：

function changeClass(){
 $scope.className = "change2";
}

<div class="{{className}}"></div>

网上各种不推荐，说实话，既然angularJS双向数据绑定这么吊，为什么不能通过这个来改变呢！查了下原由：“在controller涉及了classname在我看来是乎总是那么诡异，我希望的是controller是一个干净的纯javascript意义的object”，当然并没有明文固定不能够这么使用的，而且反而我觉得这样非常的方便，让html中元素想怎么变就怎么变！同理中的img元素中的src就不可以通过别的来改变，但是通过这种方式就是可以的！

当然，这种方式也的确给人的感觉怪怪的，个人认为：可以不得已而为之~

第二种：通过字符串数组的形式来改变

实现方式：

function changeClass(){
 $scope.className = true/false;
}

<div ng-class="{true:'zhende',false:'jiade'}[className]"></div>

实现很简单，就是当className为真的时候class为zhende，相反则为jiade。

但是有一点不好的只能够让一个元素拥有两种状态，虽然这么说！基本也是满足所需了，我一般都用这个。简单、直观！

第三种：通过key/value的方式

实现方式：

function changeClass(){
 $scope.lala = true;
}

<div ng-class="{'selectClass':select,'choiceClass':choice,'haha':lala}"></div>

当lala为true的时候，class则为haha，个人认为这个是比较推荐的，可以弥补第二种方式的点点遗憾~

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

赞 (0)

相关推荐

  • 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指令的几种实现方式详解

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

  • 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-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用法实例分析

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

  • angularJs的ng-class切换class

    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的使用方法

    有三种方法: 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-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 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

  • 详解React中共享组件逻辑的三种方式

    废话少说,这三种方式分别是:render props.高阶组件和自定义Hook.下面依次演示 假设有一个TimeOnPage组件专门用来记录用户在当前页面停留时间,像这样: const TimeOnPage = () => { const [second, setSecond] = useState(0); useEffect(() => { setTimeout(() => { setSecond(second + 1); }, 1000); }, [second]); return

  • 详解Java实现JSONArray转Map的三种实现方式

    目录 第一种 第二种 第三种 本文只是自己常用的三种,自己总结一下,不是只有这三种,杠精走开: JSONArray数据 [ { "flagType": 1, "flagIcon": "1.jpg" }, { "flagType": 2, "flagIcon": "2.jpg" }, { "flagType": 3, "flagIcon": &quo

  • 详解MyBatis中主键回填的两种实现方式

    主键回填其实是一个非常常见的需求,特别是在数据添加的过程中,我们经常需要添加完数据之后,需要获取刚刚添加的数据 id,无论是 Jdbc 还是各种各样的数据库框架都对此提供了相关的支持,本文我就来和和大家分享下数据库主键回填在 MyBatis 中的两种实现思路. 原生写法 框架来源于我们学过的基础知识,主键回填实际上是一个在 JDBC 中就被支持的写法,有的小伙伴可能不知道这一点,因此这里我先来说说在 JDBC 中如何实现主键回填. JDBC 中实现主键回填其实非常容易,主要是在构造 Prepar

  • 详解AngularJS中$filter过滤器使用(自定义过滤器)

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

  • 详解AngularJS中的表单验证(推荐)

    详解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]*[-_]?

  • Android编程中沉浸式状态栏的三种实现方式详解

    Android编程中沉浸式状态栏的三种实现方式详解

    本文实例讲述了Android编程中沉浸式状态栏的三种实现方式.分享给大家供大家参考,具体如下: 沉浸式状态栏 Google从android kitkat(Android 4.4)开始,给我们开发者提供了一套能透明的系统ui样式给状态栏和导航栏,这样的话就不用向以前那样每天面对着黑乎乎的上下两条黑栏了,还可以调成跟Activity一样的样式,形成一个完整的主题,和IOS7.0以上系统一样了. 首先看下效果 首先看下第一种方式 系统的方式沉浸式状态栏实现 步奏一 //当系统版本为4.4或者4.4以上

  • 详解Java中数组判断元素存在几种方式比较

    1. 通过将数组转换成List,然后使用List中的contains进行判断其是否存在 public static boolean useList(String[] arr,String containValue){ return Arrays.asList(arr).contains(containValue); } 需要注意的是Arrays.asList这个方法中转换的List并不是java.util.ArrayList而是java.util.Arrays.ArrayList,其中java.

  • 详解spring中aop不生效的几种解决办法

    先看下这个问题的背景:假设有一个spring应用,开发人员希望自定义一个注解@Log,可以加到指定的方法上,实现自动记录日志(入参.出参.响应耗时这些) package com.cnblogs.yjmyzz.springbootdemo.aspect; import java.lang.annotation.ElementType; import java.lang.annotation.Retention; import java.lang.annotation.RetentionPolicy

  • 详解IDEA中便捷内存数据库H2的最简使用方式

    详解IDEA中便捷内存数据库H2的最简使用方式

    在IDEA中做练习或做demo时,有时候需要使用到数据库,但如果自己机子上本来没有安装数据库(全新安装太麻烦或资源有限),也没有可用的远程数据库时,我们可以直接在IDEA上使用便捷式的内存数据库H2,关于H2更多知识就自己去找一下资料了,接下来主要讲一下如何在IDEA下的SpringBoot项目中把它用起来! 首先在IDEA中新建一个空的Maven项目,编辑项目pom.xml文件,增加SpringBoot和最基础的数据访问相关jar包依赖: <?xml version="1.0"

  • 详解IOS判断当前网络状态的三种方法

    在项目中,为了好的用户体验,有些场景必须线判断网络状态,然后才能决定该干嘛.比如视频播放,需要线判断是Wifi还是4G,Wifi直接播放,4G先提示用户.获取网络状态的方法大概有三种: 1. Reachability 这是苹果的官方演示demo中使用到的方法,我们可以到苹果官方文档里下载Demo(点击左上角Download Sample Code 即可下载),然后把Demo里的Reachability.h和.m考到自己项目中,并在Build Phases 的 Link Binary 添加Syst

随机推荐