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


Posted in Javascript onJune 02, 2017

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

而在这所谓的样子当然就是改变其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,个人认为这个是比较推荐的,可以弥补第二种方式的点点遗憾~

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
对YUI扩展的Gird组件 Part-2
Mar 10 Javascript
JavaScript 动态创建VML的方法
Oct 14 Javascript
图片onload事件触发问题解决方法
Jul 31 Javascript
Jquery ajax传递复杂参数给WebService的实现代码
Aug 08 Javascript
SyntaxHighlighter语法高亮插件使用说明
Aug 14 Javascript
兼容IE、FireFox、Chrome等浏览器的xml处理函数js代码
Nov 30 Javascript
下拉列表select 由左边框移动到右边示例
Dec 04 Javascript
jQuery中each()方法用法实例
Dec 27 Javascript
QQ登录背景闪动效果附效果演示源码下载
Sep 22 Javascript
js实现文字列表无缝滚动效果
Jun 23 Javascript
layui 解决form表单点击无反应的问题
Oct 25 Javascript
vue+openlayers绘制省市边界线
Dec 24 Vue.js
vue.js删除动态绑定的radio的指定项
Jun 02 #Javascript
vue.js选中动态绑定的radio的指定项
Jun 02 #Javascript
Spring shiro + bootstrap + jquery.validate 实现登录、注册功能
Jun 02 #jQuery
Vue.js中数据绑定的语法教程
Jun 02 #Javascript
SpringMVC+bootstrap table实例详解
Jun 02 #Javascript
BootStrap daterangepicker 双日历控件
Jun 02 #Javascript
ES6中箭头函数的定义与调用方式详解
Jun 02 #Javascript
You might like
PHP+Ajax异步通讯实现用户名邮箱验证是否已注册( 2种方法实现)
2011/12/28 PHP
PHP json_encode() 函数详解及中文乱码问题
2015/11/05 PHP
[原创]php简单隔行变色功能实现代码
2016/07/09 PHP
PHP7.1方括号数组符号多值复制及指定键值赋值用法分析
2016/09/26 PHP
MAC下通过改apache配置文件切换php多版本的方法
2017/04/26 PHP
PHP中使用mpdf 导出PDF文件的实现方法
2018/10/22 PHP
PDO::getAvailableDrivers讲解
2019/01/28 PHP
jQueryUI如何自定义组件实现代码
2010/11/14 Javascript
Javascript Object 对象学习笔记
2014/12/17 Javascript
JavaScript判断undefined类型的正确方法
2015/06/30 Javascript
Vue2.0实现1.0的搜索过滤器功能实例代码
2017/03/20 Javascript
微信小程序 wx.request方法的异步封装实例详解
2017/05/18 Javascript
jQuery自定义多选下拉框效果
2017/06/19 jQuery
微信小程序时间标签和时间范围的联动效果
2019/02/15 Javascript
个人小程序接入支付解决方案
2019/05/23 Javascript
简单谈谈javascript高级特性
2019/09/04 Javascript
js实现拾色器插件(ColorPicker)
2020/05/21 Javascript
[11:44]Ti9 OG夺冠时刻
2019/08/25 DOTA
python通过urllib2获取带有中文参数url内容的方法
2015/03/13 Python
在Python中封装GObject模块进行图形化程序编程的教程
2015/04/14 Python
python3.5仿微软计算器程序
2020/03/30 Python
Python的SQLalchemy模块连接与操作MySQL的基础示例
2016/07/11 Python
通过python+selenium3实现浏览器刷简书文章阅读量
2017/12/26 Python
Python推导式简单示例【列表推导式、字典推导式与集合推导式】
2018/12/04 Python
如何通过python画loss曲线的方法
2019/06/26 Python
Python实现图片添加文字
2019/11/26 Python
python Popen 获取输出,等待运行完成示例
2019/12/30 Python
pytorch  网络参数 weight bias 初始化详解
2020/06/24 Python
Html5原生拖拽相关事件简介以及基础实现
2020/11/19 HTML / CSS
埃弗顿足球俱乐部官方网上商店:Everton Direct
2018/01/13 全球购物
2014年高三毕业生自我评价
2014/01/11 职场文书
学校节能减排倡议书
2014/05/16 职场文书
防汛工作情况汇报
2014/10/28 职场文书
《将心比心》教学反思
2016/02/23 职场文书
MongoDB数据库常用的10条操作命令
2021/06/18 MongoDB
Python连接Postgres/Mysql/Mongo数据库基本操作大全
2021/06/29 Python