ng-class改变css样式
而在这所谓的样子当然就是改变其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,个人认为这个是比较推荐的,可以弥补第二种方式的点点遗憾~
ng-class="{'choose':sendData.subspecs[key]===subspec.spec_id}" 后面为true就显示该class
所以基本上,angularJS中ng-class的实现就这三种方式~
ng-class改变css样式的更多相关文章
- jQuery基础 - 改变CSS样式
		jQuery提供css()的方法来实现嵌入式改变元素样式,css()方法在使用上具有多样性.其中一种接受两个输入参数:样式属性和样式值,它们之间用逗号分开.比如我们要改变链接颜色,我们可以使用下面的代 ... 
- jQuery中添加/改变/移除改变CSS样式例子
		在jquery中对于div样式操作我们会使用到CSS() removeClass() addClass()方法来操作了,下面我们就整理了几个例子大家一起来看看吧. CSS()方法改变CSS样式 ... 
- 改变CSS样式
		改变CSS样式 1.改变HTML元素样式的语法 //改变HTML样式的语法 document.getElementById(id).style.property = new style 例子: < ... 
- JQuery - 改变css样式
		jQuery提供css()的方法来实现嵌入式改变元素样式,css()方法在使用上具有多样性.其中一种接受两个输入参数:样式属性和样式值,它们之间用逗号分开.比如我们要改变链接颜色,我们可以使用下面的代 ... 
- jQuery CSS()方法改变CSS样式实例解析
		转自:http://www.jbxue.com/article/24588.html 分享一个jQuery入门实例:使用CSS()方法改变现有的CSS样式表,css()方法在使用上具有多样性.其中有一 ... 
- js改变css样式
		CreateTime--2017年10月31日15:14:12 Author:Marydon js改变css样式 1.js改变单个css样式 HTML部分 <div id="tes ... 
- 8 HTML DOM 元素的查找与改变&改变CSS样式&HTML事件
		HTML DOM(Document Object Model)文档对象模型 当网页被加载时,浏览器会创建页面的文档对象模型. HTMLDOM 定义了用于HTML的一系列标准的对象.通过DOM,你可以访 ... 
- javascript之DOM编程改变CSS样式(简易验证码显示)
		<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ... 
- 强制改变css样式优先级
		.list{ left:20px!important; } css !important作用是提高指定CSS样式规则的应用优先权. !important是CSS1就定义的语法,作用是提高指定样式规则的 ... 
- 巧用hover改变css样式和背景
		<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ... 
随机推荐
- 机器学习:Python中如何使用支持向量机(SVM)算法
			(简单介绍一下支持向量机,详细介绍尤其是算法过程可以查阅其他资) 在机器学习领域,支持向量机SVM(Support Vector Machine)是一个有监督的学习模型,通常用来进行模式识别.分类(异 ... 
- Android Weekly Notes Issue #250
			Android Weekly Issue #250 March 26th, 2017 Android Weekly Issue #250. 本期内容: 好几篇关于Android O预览版的文章; JU ... 
- Struts2的类型转换(下)
			Struts2提供的类型转换: Struts2提供的是一个名叫StrutsTypeConverter的抽象类,这个类实际上是DefaultTypeConverter的子类.当我们继承自该抽象类 时,要 ... 
- Java版权信息之Jautodoc
			Java项目开发中,常常需要在编码文件上面加上一些版权声明或者类注释,如果文件很多,手工去添加或者修改,会很麻烦.可以利用工具满足我们的要求.一.版权声明可以使用Jautodoc.将jautodoc的 ... 
- php 1到100累加 新方法
			<?php $sum = 0; for($i=0;$i<=100;$i++){ $sum += $i; } echo $sum; 之前只是这么写. 现在发现可以这么写 $sum = arr ... 
- centos7安装nagios步骤
			一.Nagios简介 Nagios是一款开源的电脑系统和网络监视工具,能有效监控Windows.Linux和Unix的主机状态,交换机路由器等网络设置,打印机等.在系统或服务状态异常时发出邮件或短信报 ... 
- JSP/Servlet------------------------->>动态网页开发基础(一)
			动态网页:是指在服务器端运行的,使用程序语言设计的交互式网页,它们会根据某种条件的变化,返回不同的网页内容. 动态网站可以实现交互功能,如用户注册.信息发布.产品展示.订单管理等等: 动态网页并不是独 ... 
- html的常用基础应用
			HTML结构 如下一段最简单的HTML代码:<html> <head> <title>HTML页面</title> ... 
- struts2  之 Action的创建方式
			总结:struts2是一个轻量级框架,提供了无侵入性的实现方式,struts2也提供了接口和类来实现action.通过实现接口或者继承类来实现action可以实现struts2提供的相关功能, 1. ... 
- (function($){….})(jQuery)一种js插件写法
			我们先看第一个括号里边的内容:function($){….},这不就是一个匿名的函数吗?但是它的形参比较奇怪,是$,这里主要是为了不与其它的库冲突. 这样我们就比较容易理解第一个括号内的内容就是定义了 ... 
