详解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 相关文章推荐
extjs 学习笔记 四 带分页的grid
Oct 20 Javascript
jquery中get,post和ajax方法的使用小结
Feb 04 Javascript
jquery如何根据值设置默认的选中项
Mar 17 Javascript
node.js中的path.join方法使用说明
Dec 08 Javascript
javascript实现网站加入收藏功能
Dec 16 Javascript
BootStrap glyphicon图标无法显示的解决方法
Sep 06 Javascript
JavaScript中Hoisting详解 (变量提升与函数声明提升)
Aug 18 Javascript
p5.js入门教程之平滑过渡(Easing)
Mar 16 Javascript
vuex根据不同的用户权限展示不同的路由列表功能
Sep 20 Javascript
vue移动端模态框(可传参)的实现
Nov 20 Javascript
JS实现页面数据懒加载
Feb 13 Javascript
前端 javascript 实现文件下载的示例
Nov 24 Javascript
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中使用curl_init函数的说明
2010/11/02 PHP
PHP中把stdClass Object转array的几个方法
2014/05/08 PHP
php工具型代码之印章抠图
2018/07/18 PHP
javascript的对话框详解与参数
2007/03/08 Javascript
自定义jQuery插件方式实现强制对象重绘的方法
2015/03/23 Javascript
javascript制作2048游戏
2015/03/30 Javascript
JSON与XML优缺点对比分析
2015/07/17 Javascript
JS+Canvas 实现下雨下雪效果
2016/05/18 Javascript
jQuery实现table中的tr上下移动并保持序号不变的实例代码
2016/07/11 Javascript
微信开发 微信授权详解
2016/10/21 Javascript
微信小程序 picker 组件详解及简单实例
2017/01/10 Javascript
axios学习教程全攻略
2017/03/26 Javascript
javascript中的面向对象
2017/03/30 Javascript
webpack学习笔记之代码分割和按需加载的实例详解
2017/07/20 Javascript
JS实现简单短信验证码界面
2017/08/07 Javascript
Angular实现下载安装包的功能代码分享
2017/09/05 Javascript
详解webpack-dev-server的简单使用
2018/04/02 Javascript
ES6知识点整理之模块化的应用详解
2019/04/15 Javascript
详解微信UnionID作用
2019/05/15 Javascript
[00:03]DOTA2新版本PA至宝展示
2014/11/19 DOTA
python中input()与raw_input()的区别分析
2016/02/27 Python
一文总结学习Python的14张思维导图
2017/10/17 Python
Python+tkinter模拟“记住我”自动登录实例代码
2018/01/16 Python
django数据库migrate失败的解决方法解析
2018/02/08 Python
Python zip()函数用法实例分析
2018/03/17 Python
Python做智能家居温湿度报警系统
2018/09/25 Python
Python为何不支持switch语句原理详解
2020/10/21 Python
获取邓白氏信用报告:Dun & Bradstreet
2019/01/22 全球购物
Lentiamo荷兰:在线订购隐形眼镜、隐形眼镜液和太阳镜
2019/10/25 全球购物
广州地球村科技数据库题目
2016/04/25 面试题
文员岗位职责
2013/11/09 职场文书
中学实习教师自我鉴定
2013/12/12 职场文书
招聘专员岗位职责
2014/03/07 职场文书
合作协议书怎么写
2014/04/18 职场文书
心得体会的写法
2014/09/05 职场文书
后天观后感
2015/06/08 职场文书