详解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 相关文章推荐
网站上面有这种切换效果
Jun 26 Javascript
制作jquery遮罩层效果导航菜单代码分享
Dec 25 Javascript
深入理解JavaScript系列(27):设计模式之建造者模式详解
Mar 03 Javascript
jquery实现根据浏览器窗口大小自动缩放图片的方法
Jul 17 Javascript
JQuery手速测试小游戏实现思路详解
Sep 20 Javascript
JavaScript的for循环中嵌套一个点击事件的问题解决
Mar 03 Javascript
详解使用angular-cli发布i18n多国语言Angular应用
May 20 Javascript
Vue 配合eiement动态路由,权限验证的方法
Sep 26 Javascript
微信小程序列表时间戳转换实现过程解析
Oct 12 Javascript
JS正则表达式常见函数与用法小结
Apr 13 Javascript
vue+ElementUI 关闭对话框清空验证,清除form表单的操作
Aug 06 Javascript
一文彻底理解js原生语法prototype,__proto__和constructor
Oct 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判断访客是否手机端(移动端浏览器)访问的方法总结【4种方法】
2019/03/27 PHP
JSON扫盲帖 JSON.as类教程
2009/02/16 Javascript
js注意img图片的onerror事件的分析
2011/01/01 Javascript
读jQuery之五(取DOM元素)
2011/06/20 Javascript
jquery实现倒计时代码分享
2014/06/13 Javascript
connect中间件session、cookie的使用方法分享
2014/06/17 Javascript
jQuery验证插件validation使用指南
2015/04/21 Javascript
jqTransform美化表单
2015/10/10 Javascript
js实现文字向上轮播功能
2017/01/13 Javascript
windows下vue-cli导入bootstrap样式
2017/04/25 Javascript
js获取一组日期中最近连续的天数
2017/05/25 Javascript
Angular 2父子组件数据传递之@Input和@Output详解 (上)
2017/07/05 Javascript
p5.js入门教程之鼠标交互的示例
2018/03/16 Javascript
Vue 与 Vuex 的第一次接触遇到的坑
2018/08/16 Javascript
nodejs log4js 使用详解
2019/05/31 NodeJs
Vue自定义render统一项目组弹框功能
2020/06/07 Javascript
[02:57]2014DOTA2国际邀请赛-观众采访
2014/07/19 DOTA
Python使用time模块实现指定时间触发器示例
2017/05/18 Python
使用Python读取大文件的方法
2018/02/11 Python
pandas 条件搜索返回列表的方法
2018/10/30 Python
利用python和百度地图API实现数据地图标注的方法
2019/05/13 Python
Python利用pandas处理Excel数据的应用详解
2019/06/18 Python
python获取点击的坐标画图形的方法
2019/07/09 Python
python3+opencv生成不规则黑白mask实例
2020/02/19 Python
pandas数据选取:df[] df.loc[] df.iloc[] df.ix[] df.at[] df.iat[]
2020/04/24 Python
新手学python应该下哪个版本
2020/06/11 Python
解决PDF 转图片时丢文字的一种可能方式
2021/03/04 Python
canvas实现图片镜像翻转的2种方式
2020/07/22 HTML / CSS
高级运动鞋:GREATS
2019/07/19 全球购物
大学生创业计划书的格式要求
2013/12/29 职场文书
财务支持类个人的自我评价
2014/02/14 职场文书
中国梦我的梦演讲稿
2014/04/23 职场文书
省级优秀班集体申报材料
2014/05/25 职场文书
致青春观后感
2015/06/09 职场文书
小学三年级班主任工作经验交流材料
2015/11/02 职场文书
详细聊聊MySQL中慢SQL优化的方向
2021/08/30 MySQL