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 ...
随机推荐
- 02.PHP7.x编译详解
#php7编译安装安装 ``` useradd -M -s /sbin/nologin www yum -y install openssl-devel bzip2-devel curl-devel ...
- GDOI2014模拟 旅行【SPFA】
旅行(travel) 从前有一位旅者,他想要游遍天下所有的景点.这一天他来到了一个神奇的王国:在这片土地上,有n个城市,从1到n进行编号.王国中有m条道路,第i条道路连接着两个城市ai,bi,由于年代 ...
- C# 调用CMD执行命令行
这几天用c#做了一个项目,其中一个功能是要把生成的临时文件隐藏,同时,不能在屏幕上有调用CMD的痕迹,这里生成的临时文件的绝对路径为delfile为文件的绝对路径, 代码如下: private voi ...
- 浓缩的才是精华:浅析GIF格式图片的存储和压缩
成文迪, 在Web前端摸爬滚打的码农一枚,对技术充满热情的菜鸟,致力为手Q的建设添砖加瓦. GIF格式的历史 GIF(Graphics Interchange Format)原义是"图像互换 ...
- 实用开发之-oracle表回滚到一个指定时间的操作语句
在开发或客户使用过程中,难免会出现误操作或脏数据,那么怎么迅速处理这个问题呢? 1.备份还原就用了,太麻烦. 就是使用ORACLE的备份功能,然后在还原,还原的时候新建一个库,然后使用dblink进行 ...
- JDBC基础学习(六)—数据库连接池
一.数据库连接池介绍 1.数据库连接池的缘由 对于一个简单的数据库应用,由于对于数据库的访问不是很频繁.这时可以简单地在需要访问数据库时,就新创建一个连接,用完后就关闭它,这样做也不会带来什 ...
- c#FTP操作类,包含上传,下载,删除,获取FTP文件列表文件夹等Hhelp类
有些时间没发表文章了,之前用到过,这是我总结出来关于ftp相关操作一些方法,网上也有很多,但是没有那么全面,我的这些仅供参考和借鉴,希望能够帮助到大家,代码和相关引用我都复制粘贴出来了,希望大家喜欢 ...
- POI框架实现创建Excel表、添加数据、读取数据
public class TestPOI2Excel {//创建2003版本Excel用此方法 @Test public void testWrite03Excel() throws Exceptio ...
- 怎么看iOS human interface guidelines中的user control原则
最近离开了老东家,整理整理思路,因为一直做的是微信公众号相关的产品对app的东西有一段时间没有做过了,所以又看了一遍iOS human interface guidelines,看到user cont ...
- appium+python做移动端自动化测试
1 导言 1.1 编制目的 该文档为选用Appium作为移动设备原生(Native).混合(Hybrid).移动Web(Mobile Web)应用UI自动化测试的相关自动化测试人员.开发人员等提供 ...