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 ...
随机推荐
- 老李分享:接电话扩展之uiautomator 1
老李分享:接电话扩展之uiautomator poptest是国内唯一一家培养测试开发工程师的培训机构,以学员能胜任自动化测试,性能测试,测试工具开发等工作为目标.如果对课程感兴趣,请大家咨询qq ...
- sublime Text3快捷键使用大全
Ctrl+D 选中光标所占的文本,继续操作则会选中下一个相同的文本.Alt+F3 选中文本按下快捷键,即可一次性选择全部的相同文本进行同时编辑.举个栗子:快速选中并更改所有相同的变量名.函数名等.Ct ...
- 项目的ip地址更改,用git从远程提取代码出现错误,提示为 network error connection timed out
昨天公司的ip进行了修改,在今天从远程提取代码的过程中提示network error connection timed out错误,从网上看了一下解决方法 1:打开项目文件夹,点击查看 2:勾选隐藏的 ...
- 漫谈PHP代码规范
前言 虽说PHP是世界上最好的语言,但是写出来的PHP代码却往往不是最美观的.究其原因,可能正式因为PHP简单易上手,适合快速迭代的特性,导致了我们沉浸在迅速完成需求迭代的窃喜中,却忘记了规范性.忽略 ...
- JavaScript之作用域与闭包总结
博主最开始接触程序是C语言,C++,后来是java,现在是php,无论哪一种语言与javascript在机制上都还是有比较大的区别. 下面总结一下用面向对象的思想写javascript需要区分的要点: ...
- memcached预热失败
缓存逻辑:set和get方法通过中间层SocketServer,由SocketServer去操作缓存(同步备用缓存等) 预热逻辑:在SocketServer里面打日志,通过日志去预热新缓存 出现问题: ...
- VS Code 的常用快捷键
VS Code 的常用快捷键和插件 一.vs code 的常用快捷键 1.注释: a) 单行注释:[ctrl+k,ctrl+c] 或 ctrl+/ b) 取消单行注释:[ctrl+k,ctrl+u] ...
- java小题:福尔摩斯的约会
原题地址:https://www.nowcoder.com/pat/6/problem/4040 防止广告嫌疑,原题为: 题目描述 大侦探福尔摩斯接到一张奇怪的字条:"我们约会吧! 3485 ...
- 跟着刚哥梳理java知识点——变量之间的类型转换(四)
变量之间的类型转换主要包括自动类型转换和强制类型转换. 1.自动类型转换:当容量小的数据类型与容量大的数据类型做运算时,容量小的会自动的转换成容量大的类型. [知识点]: a)char,byte,sh ...
- SQL Server 中截取字符串常用的函数
SQL Server 中截取字符串常用的函数: 1.LEFT ( character_expression , integer_expression ) 函数说明:LEFT ( '源字符串' , '要 ...