详解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 相关文章推荐
IE下window.onresize 多次调用与死循环bug处理方法介绍
Nov 12 Javascript
ECMAScript5中的对象存取器属性:getter和setter介绍
Dec 08 Javascript
jQuery实现强制cookie过期方法汇总
May 22 Javascript
三种带箭头提示框总结实例
Jun 14 Javascript
使用jquery/js获取iframe父子级、同级获取元素的方法
Aug 05 Javascript
jquery根据td给相同tr下其他td赋值的实现方法
Oct 05 Javascript
微信小程序 天气预报开发实例代码源码
Jan 20 Javascript
详谈js模块化规范
Jul 07 Javascript
JS实现标签滚动切换效果
Dec 25 Javascript
vue项目中使用ueditor的实例讲解
Mar 05 Javascript
vue利用axios来完成数据的交互
Mar 23 Javascript
微信小程序实现展示评分结果功能
Feb 15 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
oracle资料库函式库
2006/10/09 PHP
php Memcache 中实现消息队列
2009/11/24 PHP
PHP中strtotime函数使用方法分享
2012/01/10 PHP
基于PHP magic_quotes_gpc的使用方法详解
2013/06/24 PHP
PHP实现UTF-8文件BOM自动检测与移除实例
2014/11/05 PHP
Laravel 5 学习笔记
2015/03/06 PHP
php的对象传值与引用传值代码实例讲解
2021/02/26 PHP
网页自动刷新,不产生嗒嗒声的一个解决方法
2007/03/27 Javascript
javascript 鼠标滚轮事件
2009/04/09 Javascript
图片上传即时显示缩略图的js代码
2009/05/27 Javascript
自己的js工具 Cookie 封装
2009/08/21 Javascript
js下用eval生成JSON对象
2010/09/17 Javascript
jQuery1.4.2与老版本json格式兼容的解决方法
2011/02/12 Javascript
jQuery创建插件的代码分析
2011/04/14 Javascript
jQuery实现的输入框选择时间插件用法实例
2015/02/28 Javascript
基于JavaScript实现移动端点击图片查看大图点击大图隐藏
2015/11/04 Javascript
JS中多种方式创建对象详解
2016/03/22 Javascript
微信小程序 开发之快递查询功能的实现
2017/01/09 Javascript
jqueryUI tab标签页代码分享
2017/10/09 jQuery
Vue组件中slot的用法
2018/01/30 Javascript
解决v-for中使用v-if或者v-bind:class失效的问题
2018/09/25 Javascript
使用eslint和githooks统一前端风格的技巧
2020/07/29 Javascript
[05:49]2014DOTA2TI4正赛第二日综述 昔日冠军纷纷落马 VG LGD占尽先机
2014/07/20 DOTA
linux系统使用python获取内存使用信息脚本分享
2014/01/15 Python
深入理解python try异常处理机制
2016/06/01 Python
Python Selenium Cookie 绕过验证码实现登录示例代码
2018/04/10 Python
Python3数字求和的实例
2019/02/19 Python
适合各种场合的美食礼品:Harry & David
2016/08/03 全球购物
使用索引有什么好处
2016/07/27 面试题
冰淇淋店的创业计划书
2014/02/07 职场文书
幼儿园毕业教师感言
2014/02/21 职场文书
社区植树节活动总结
2015/02/06 职场文书
企业战略合作意向书
2015/05/08 职场文书
2015初中政教处工作总结
2015/07/21 职场文书
基层党建工作简报
2015/07/21 职场文书
导游词之山西-五老峰
2019/10/07 职场文书