详解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 11 Javascript
juqery 学习之五 文档处理 插入
Feb 11 Javascript
javascript实现页面内关键词高亮显示代码
Apr 03 Javascript
jquery实现的V字形显示效果代码
Oct 27 Javascript
JavaScript如何实现跨域请求
Aug 05 Javascript
微信小程序 form组件详解
Oct 25 Javascript
JS实现太极旋转思路分析
Dec 09 Javascript
JS实现的四级密码强度检测功能示例
May 11 Javascript
vue父组件中获取子组件中的数据(实例讲解)
Sep 27 Javascript
JS实现读取xml内容并输出到div中的方法示例
Apr 19 Javascript
用webpack4开发小程序的实现方法
Jun 04 Javascript
vue实现轮播图帧率播放
Jan 26 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
调整优化您的LAMP应用程序的5种简单方法
2011/06/26 PHP
使用PHP实现阻止用户上传成人照片或者裸照
2014/12/25 PHP
在html文件中也可以执行php语句的方法
2015/04/09 PHP
Yii框架实现记录日志到自定义文件的方法
2017/05/23 PHP
PHP实现本地图片转base64格式并上传
2020/05/29 PHP
FormValidate 表单验证功能代码更新并提供下载
2008/08/23 Javascript
jquery实现盒子下拉效果示例代码
2013/09/12 Javascript
jquery easyui滚动条部分设置介绍
2013/09/12 Javascript
关于删除时的提示处理(确定删除吗)
2013/11/03 Javascript
jQuery基于ajax实现带动画效果无刷新柱状图投票代码
2015/08/10 Javascript
JS实现页面数据无限加载
2016/09/13 Javascript
用JavaScript实现让浏览器停止载入页面的方法
2017/01/19 Javascript
Vue学习笔记进阶篇之单元素过度
2017/07/19 Javascript
vue 修改 data 数据问题并实时显示的方法
2018/08/27 Javascript
脚手架vue-cli工程webpack的基本用法详解
2018/09/29 Javascript
Angular使用ControlValueAccessor创建自定义表单控件
2019/03/08 Javascript
详解vue中this.$emit()的返回值是什么
2019/04/07 Javascript
基于hashlib模块--加密(详解)
2017/06/21 Python
pandas apply 函数 实现多进程的示例讲解
2018/04/20 Python
Python3中详解fabfile的编写
2018/06/24 Python
python保存字典和读取字典的实例代码
2019/07/07 Python
python动态视频下载器的实现方法
2019/09/16 Python
Python模拟FTP文件服务器的操作方法
2020/02/18 Python
Django数据库操作之save与update的使用
2020/04/01 Python
python利用文件时间批量重命名照片和视频
2021/02/09 Python
一张图片能隐含千言万语之隐藏你的程序代码
2012/12/13 HTML / CSS
Roxy美国官网:澳大利亚冲浪、滑雪健身品牌
2016/07/30 全球购物
联想马亚西亚官方网站:Lenovo Malaysia
2018/09/19 全球购物
屈臣氏泰国官网:Watsons TH
2021/02/23 全球购物
如何写出好的Java代码
2014/04/25 面试题
幼师自我鉴定范文
2013/10/01 职场文书
竞争上岗演讲稿范文
2014/05/12 职场文书
交通事故和解协议书
2015/01/27 职场文书
2015年企业工作总结范文
2015/04/28 职场文书
夫妻吵架保证书
2015/05/08 职场文书
OpenCV-Python实现轮廓的特征值
2021/06/09 Python