详解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学习笔记之 函数篇(一) : 函数声明和函数表达式
Jun 24 Javascript
javascript实现表格增删改操作实例详解
May 15 Javascript
javascript禁止超链接跳转的方法
Feb 02 Javascript
AngularJS 入门教程之HTML DOM实例详解
Jul 28 Javascript
JSON与js对象序列化实例详解
Mar 16 Javascript
SpringMVC+bootstrap table实例详解
Jun 02 Javascript
javascript基于牛顿迭代法实现求浮点数的平方根【递归原理】
Sep 28 Javascript
解决vue-cli单页面手机应用input点击手机端虚拟键盘弹出盖住input问题
Aug 25 Javascript
使vue实现jQuery调用的两种方法
May 12 jQuery
Bootstrap 时间日历插件bootstrap-datetimepicker配置与应用小结
May 28 Javascript
javascript实现简单打字游戏
Oct 29 Javascript
原理深度解析Vue的响应式更新比React快
Apr 04 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
风味层面去分析咖啡油脂
2021/03/03 咖啡文化
FirePHP 推荐一款PHP调试工具
2011/04/23 PHP
PHP防CC攻击实现代码
2011/12/29 PHP
解析thinkphp基本配置 convention.php
2013/06/18 PHP
PHP大文件分割上传 PHP分片上传
2017/08/28 PHP
javascript preload&amp;lazy load
2010/05/13 Javascript
js 实现css风格选择器(压缩后2KB)
2012/01/12 Javascript
js检测浏览器版本、核心、是否移动端示例
2014/04/24 Javascript
jQuery简单实现日历的方法
2015/05/04 Javascript
Nodejs 搭建简单的Web服务器详解及实例
2016/11/30 NodeJs
ES2015 Symbol 一种绝不重复的值
2016/12/25 Javascript
详解Vue-基本标签和自定义控件
2017/03/24 Javascript
重新理解JavaScript的六种继承方式
2017/03/24 Javascript
angular select 默认值设置方法
2017/06/23 Javascript
微信小程序实现动态设置页面标题的方法【附源码下载】
2017/11/29 Javascript
vue实现消息的无缝滚动效果的示例代码
2017/12/05 Javascript
layui的数据表格+springmvc实现搜索功能的例子
2019/09/28 Javascript
jQuery实现获取多选框的值示例
2020/02/07 jQuery
[03:44]2015国际邀请赛选手档案—Cloud9.NoTail
2015/07/28 DOTA
Python(Tornado)模拟登录小米抢手机
2013/11/12 Python
python利用正则表达式提取字符串
2016/12/08 Python
Python列表生成式与生成器操作示例
2018/08/01 Python
Python3 关于pycharm自动导入包快捷设置的方法
2019/01/16 Python
python opencv 简单阈值算法的实现
2019/08/04 Python
django之自定义软删除Model的方法
2019/08/14 Python
django drf框架自带的路由及最简化的视图
2019/09/10 Python
Python常用编译器原理及特点解析
2020/03/23 Python
python cookie反爬处理的实现
2020/11/01 Python
东方通信股份有限公司VC面试题
2014/08/27 面试题
计算机专业个人简短的自我评价
2013/10/23 职场文书
送餐员岗位职责范本
2014/02/21 职场文书
倡议书范文
2014/04/16 职场文书
排查整治工作方案
2014/06/09 职场文书
学习保证书
2015/01/17 职场文书
2016年记者节感言
2015/12/08 职场文书
2016个人廉洁自律承诺书
2016/03/25 职场文书