AngularJS中关于ng-class指令的几种实现方式详解


Posted in Javascript onSeptember 17, 2016

前言

开发中经常会遇到这样的需求,一个元素需要在不同的状态下呈现不同的样子,而在这所谓的的样子当然就是改变其css的属性,而实现动态的改变属性值,我们就需要实现动态的更换其class属性值。

在这给大家介绍三种方法来实现,大家可以根据自己的需求来选择方式,下面来看看。

第一种:通过数据的双向绑定(不推荐)

<div ng-controller="firstController">
  <div ng-class="{{className}}"></div>

</div>
<script>
  var app=angular.module("myModule",[])
   app.controller('firstController',function($scope){
     $scope.className='change';

   })
</script>

网上各种不推荐,说实话,既然angularJS双向数据绑定这么吊,为什么不能通过这个来改变呢!查了下原由:“在controller涉及了classname在我看来是乎总是那么诡异,我希望的是controller是一个干净的纯javascript意义的object”,当然并没有明文固定不能够这么使用的,而且反而我觉得这样非常的方便,让html中元素想怎么变就怎么变!同理中的img元素中的src就不可以通过别的来改变,但是通过这种方式就是可以的!当然,这种方式也的确给人的感觉怪怪的,个人认为:可以不得已而为之~

第二种:通过对象数组

<div ng-controller="firstController">

 <div ng-class="{true:'change1',false:'change2'}[className]"></div>


</div>
<script>
  var app=angular.module("myModule",[])
   app.controller('firstController',function($scope){
     $scope.className=true;

   })
</script>

实现很简单,就是当classNametrue的时候classchange1,相反则为change2

但是有一点不好的只能够让一个元素拥有两种状态,虽然这么说!基本也是满足所需了,我一般都用这个。简单、直观!

第三种:通过key/value

<div ng-controller="firstController">

  <div ng-class="{'change1':select,'change2':choice,'change3':lala}">

</div>
<script>
  var app=angular.module("myModule",[])
   app.controller('firstController',function($scope){
     $scope.select=true;
     $scope.lala=true;

   })
</script>

lalatrue的时候,class则为change3,个人认为这个是比较推荐的,可以弥补第二种方式的点点遗憾~

总结

我们如果在项目中可以灵活的运用这些指令会给我们带来非常多的便利,我们在解决问题的时候能有更多的思路,这样我们可以组合的使用这些指令来快速的解决一些比较苦恼的问题!以上就是这篇文章的全部内容,希望能对大家想学习或者工作带来一定的帮助,如果有疑问大家可以留言交流。

Javascript 相关文章推荐
Ucren Virtual Desktop V2.0
Nov 07 Javascript
htm调用JS代码
Mar 15 Javascript
Javascript的this用法
Jan 16 Javascript
JS实现复选框的全选和批量删除功能
Apr 05 Javascript
jQuery Validate格式验证功能实例代码(包括重名验证)
Jul 18 jQuery
Angular.js项目中使用gulp实现自动化构建以及压缩打包详解
Jul 19 Javascript
浅谈webpack-dev-server的配置和使用
May 17 Javascript
vue全局使用axios的方法实例详解
Nov 22 Javascript
微信小程序控制台提示warning:Now you can provide attr &quot;wx:key&quot; for a &quot;wx:for&quot; to improve performance解决方法
Feb 21 Javascript
详解element-ui中el-select的默认选择项问题
Aug 02 Javascript
Vue2.0 $set()的正确使用详解
Jul 28 Javascript
动态实现element ui的el-table某列数据不同样式的示例
Jan 22 Javascript
AngularJS中过滤器的使用与自定义实例代码
Sep 17 #Javascript
利用js编写响应式侧边栏
Sep 17 #Javascript
各式各样的导航条效果css3结合jquery代码实现
Sep 17 #Javascript
JavaScript编写一个简易购物车功能
Sep 17 #Javascript
Bootstrap框架结合jQuery仿百度换肤功能实例解析
Sep 17 #Javascript
Bootstrap响应式侧边栏改进版
Sep 17 #Javascript
H5用户注册表单页 注册模态框!
Sep 17 #Javascript
You might like
WINXP下apache+php4+mysql
2006/11/25 PHP
php面向对象全攻略 (六)__set() __get() __isset() __unset()的用法
2009/09/30 PHP
getimagesize获取图片尺寸实例
2014/11/15 PHP
php实现可用于mysql,mssql,pg数据库操作类
2014/12/13 PHP
php实现上传图片文件代码
2015/07/19 PHP
PHP设计模式之适配器模式(Adapter)原理与用法详解
2019/12/12 PHP
Web开发者必备的12款超赞jQuery插件
2010/12/03 Javascript
理清apply(),call()的区别和关系
2011/08/14 Javascript
『JavaScript』限制Input只能输入数字实现思路及代码
2013/04/22 Javascript
解析JavaScript中delete操作符不能删除的对象
2013/12/03 Javascript
JavaScript实现Java中StringBuffer的方法
2015/02/09 Javascript
js和jq使用submit方法无法提交表单的快速解决方法
2016/05/17 Javascript
JS简单获取当前年月日星期的方法示例
2017/02/07 Javascript
解决html input验证只能输入数字,不能输入其他的问题
2017/07/21 Javascript
Vue render渲染时间戳转时间,时间转时间戳及渲染进度条效果
2018/07/27 Javascript
用python代码做configure文件
2014/07/20 Python
Python创建日历实例
2014/08/21 Python
100行Python代码实现自动抢火车票(附源码)
2018/01/11 Python
Django Rest framework权限的详细用法
2019/07/25 Python
Django中reverse反转并且传递参数的方法
2019/08/06 Python
jupyter notebook中美观显示矩阵实例
2020/04/17 Python
基于python实现图片转字符画代码实例
2020/09/04 Python
Python命令行参数argv和argparse该如何使用
2021/02/08 Python
巧用 CSS3的webkit-box-reflect 倒影实现各类动效
2021/03/05 HTML / CSS
HTML5 Video标签的属性、方法和事件汇总介绍
2015/04/24 HTML / CSS
KLOOK客路:发现更好玩的世界,预订独一无二的旅行体验
2016/12/16 全球购物
德国电子产品购物网站:TechInTheBasket德国
2018/12/07 全球购物
Dr. Martens马汀博士澳大利亚官网:马丁靴鼻祖
2019/07/02 全球购物
环境工程与管理大学毕业生求职信
2013/10/02 职场文书
幼儿运动会邀请函
2014/01/17 职场文书
职业生涯规划书范文
2014/03/10 职场文书
《长相思》听课反思
2014/04/10 职场文书
中队活动总结
2014/08/27 职场文书
优秀团员主要事迹材料
2015/11/05 职场文书
2019年大学生暑期社会实践调查报告模板
2019/11/07 职场文书
OpenCV项目实践之停车场车位实时检测
2022/04/11 Python