详解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 相关文章推荐
javascript静态的url如何传递
May 03 Javascript
Jquery uploadify图片上传插件无法上传的解决方法
Dec 16 Javascript
JS实现带缓冲效果打开、关闭、移动一个层的方法
May 09 Javascript
jquery使用ul模拟select实现表单美化的方法
Aug 18 Javascript
论Bootstrap3和Foundation5网格系统的异同
May 16 Javascript
js修改onclick动作的四种方法(推荐)
Aug 18 Javascript
Bootstrap DateTime Picker日历控件简单应用
Mar 25 Javascript
浅谈vue自定义全局组件并通过全局方法 Vue.use() 使用该组件
Dec 07 Javascript
原生js实现移动端触摸轮播的示例代码
Dec 22 Javascript
Vue封装Swiper实现图片轮播效果
Feb 06 Javascript
AngularJS与后端php的数据交互方法
Aug 13 Javascript
利用Vue实现简易播放器的完整代码
Dec 30 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 has encountered an Access Violation 错误的解决方法
2010/01/17 PHP
php的优点总结 php有哪些优点
2019/07/19 PHP
jQuery 表格插件整理
2010/04/27 Javascript
jquery ajax例子返回值详解
2012/09/11 Javascript
有关于JS构造函数的重载和工厂方法
2013/04/07 Javascript
JS获取图片实际宽高及根据图片大小进行自适应
2013/08/11 Javascript
用javascript删除当前行,添加行(示例代码)
2013/11/25 Javascript
JS学习之表格的排序简单实例
2016/05/16 Javascript
jQuery实现日期联动效果实例
2016/07/26 Javascript
使用Vue.js创建一个时间跟踪的单页应用
2016/11/28 Javascript
jQuery实现的简单拖动层示例
2017/02/22 Javascript
JavaScript判断浏览器和hack滚动条的写法
2017/07/23 Javascript
angular中的cookie读写方法
2017/08/02 Javascript
微信小程序form表单组件示例代码
2018/07/15 Javascript
js图数据结构处理 迪杰斯特拉算法代码实例
2019/09/11 Javascript
js回调函数仿360开机
2019/12/26 Javascript
vue项目中监听手机物理返回键的实现
2020/01/18 Javascript
vue实现用户长时间不操作自动退出登录功能的实现代码
2020/07/23 Javascript
[34:44]Liquid vs TNC Supermajor 胜者组 BO3 第二场 6.4
2018/06/05 DOTA
Python迭代用法实例教程
2014/09/08 Python
Python设置默认编码为utf8的方法
2016/07/01 Python
python调用百度语音识别api
2018/08/30 Python
python列表,字典,元组简单用法示例
2019/07/11 Python
python实现电子书翻页小程序
2019/07/23 Python
使用Python进行中文繁简转换的实现代码
2019/10/18 Python
python中pathlib模块的基本用法与总结
2020/08/17 Python
python爬虫看看虎牙女主播中谁最“顶”步骤详解
2020/12/01 Python
海淘零差价,宝贝全球购: 宝贝格子
2016/08/24 全球购物
京东奢侈品:全球奢侈品牌
2018/03/17 全球购物
英国儿童设计师服装的领先零售商:Base
2019/03/17 全球购物
优秀经理事迹材料
2014/02/01 职场文书
幼儿园优秀班主任事迹材料
2014/05/14 职场文书
财务会计专业求职信
2014/06/09 职场文书
个人批评与自我批评发言稿
2014/09/28 职场文书
建筑横幅标语
2014/10/09 职场文书
详解Vue的sync修饰符
2021/05/15 Vue.js