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 相关文章推荐
jQuery去掉字符串起始和结尾的空格(多种方法实现)
Apr 01 Javascript
javascript间隔刷新的简单实例
Nov 14 Javascript
JavaScript定义类的几种方式总结
Jan 06 Javascript
window.returnValue使用方法示例介绍
Jul 03 Javascript
jquery使用$(element).is()来判断获取的tagName
Aug 24 Javascript
jQuery制作可自定义大小的拼图游戏
Mar 30 Javascript
学习JavaScript设计模式之迭代器模式
Jan 19 Javascript
jquery自定义右键菜单、全选、不连续选择
Mar 01 Javascript
js微信分享实现代码
Oct 11 Javascript
利用jsonp与代理服务器方案解决跨域问题
Sep 14 Javascript
jQuery实现获取当前鼠标位置并输出功能示例
Jan 05 jQuery
详解Vue+ElementUI从零开始搭建自己的网站(一、环境搭建)
Apr 30 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
PHP脚本中include文件出错解决方法
2008/11/20 PHP
PHP中substr()与explode()函数用法分析
2014/11/24 PHP
php生成验证码函数
2015/10/20 PHP
Laravel框架源码解析之模型Model原理与用法解析
2020/05/14 PHP
Prototype中dom对象方法汇总
2008/09/17 Javascript
Mootools 1.2教程 选项卡效果(Tabs)
2009/09/15 Javascript
Juqery Html(),append()等方法的Bug解决方法
2010/12/13 Javascript
javascript中使用replaceAll()函数实现字符替换的方法
2010/12/25 Javascript
JS高级拖动技术 setCapture,releaseCapture
2011/07/31 Javascript
Extjs4中Form的使用之本地hiddenfield
2013/11/26 Javascript
jQuery满屏焦点图左右滚动特效代码分享
2015/09/07 Javascript
JavaScript Ajax编程 应用篇
2016/07/02 Javascript
Select下拉框模糊查询功能实现代码
2016/07/22 Javascript
EasyUI Combobox设置默认值 获取text的方法
2016/11/28 Javascript
jQGrid Table操作列中点击【操作】按钮弹出按钮层的实现代码
2016/12/05 Javascript
Canvas 绘制粒子动画背景
2017/02/15 Javascript
基于jQuery实现一个marquee无缝滚动的插件
2017/03/09 Javascript
vue使用vue-cli快速创建工程
2017/07/28 Javascript
vue项目中跳转到外部链接的实例讲解
2018/09/20 Javascript
新年快乐! javascript实现超级炫酷的3D烟花特效
2019/01/30 Javascript
一文了解vue-router之hash模式和history模式
2019/05/31 Javascript
Angular 中使用 FineReport不显示报表直接打印预览
2019/08/21 Javascript
javascript设计模式 ? 建造者模式原理与应用实例分析
2020/04/10 Javascript
在Python中使用next()方法操作文件的教程
2015/05/24 Python
请不要重复犯我在学习Python和Linux系统上的错误
2016/12/12 Python
老生常谈Python之装饰器、迭代器和生成器
2017/07/26 Python
Python自然语言处理 NLTK 库用法入门教程【经典】
2018/06/26 Python
python实现美团订单推送到测试环境,提供便利操作示例
2019/08/09 Python
基于Python解密仿射密码
2019/10/21 Python
Python异步编程之协程任务的调度操作实例分析
2020/02/01 Python
美国祛痘、抗衰老药妆品牌:Murad
2016/08/27 全球购物
某公司部分笔试题
2013/11/05 面试题
2014年单位植树节活动方案
2014/03/23 职场文书
股权转让协议书
2014/04/12 职场文书
go语言中http超时引发的事故解决
2021/06/02 Golang
在Oracle表中进行关键词搜索的过程
2022/06/10 Oracle