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的当鼠标滚轮到最底端继续加载新数据思路分享(多用于微博、空间、论坛 )
Oct 10 Javascript
使用js实现按钮控制文本框加1减1应用于小时+分钟
Dec 09 Javascript
解析jquery中的ajax缓存问题
Dec 19 Javascript
css结合js制作下拉菜单示例代码
Feb 27 Javascript
JavaScript中一个奇葩的IE浏览器判断方法
Apr 16 Javascript
javascript html5摇一摇功能的实现
Apr 19 Javascript
JS数组排序方法实例分析
Dec 16 Javascript
vue2.0中click点击当前li实现动态切换class
Jun 21 Javascript
Angular4实现图片上传预览路径不安全的问题解决
Dec 25 Javascript
详解js类型判断
May 22 Javascript
微信小程序新手教程之页面打开数量限制
Mar 03 Javascript
vue如何获取自定义元素属性参数值的方法
May 14 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 addslashes 函数详细分析说明
2009/06/23 PHP
7个超级实用的PHP代码片段
2011/07/11 PHP
学习php设计模式 php实现状态模式
2015/12/07 PHP
php 中奖概率算法实现代码
2017/01/25 PHP
PHP如何开启Opcache功能提升程序处理效率
2020/04/27 PHP
javascript之解决IE下不渲染的bug
2007/06/29 Javascript
Javascript 同时提交多个Web表单的方法
2009/02/19 Javascript
Array的push与unshift方法性能比较分析
2011/03/05 Javascript
解析javascript 实用函数的使用详解
2013/05/10 Javascript
JS和jquery获取各种屏幕的宽度和高度的代码
2013/08/02 Javascript
javascript特殊用法示例介绍
2013/11/29 Javascript
javascritp添加url参数将参数加入到url中
2014/09/25 Javascript
JavaScript判断变量是否为数组的方法(Array)
2016/02/24 Javascript
JS闭包用法实例分析
2017/03/27 Javascript
Textarea输入字数限制实例(兼容iOS&amp;安卓)
2017/07/06 Javascript
layer.close()关闭进度条和Iframe窗的方法
2018/08/17 Javascript
vue-model实现简易计算器
2020/08/17 Javascript
[55:03]LGD vs EG 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
python中的yield使用方法
2014/02/11 Python
Python检测网络延迟的代码
2018/05/15 Python
解决Python print 输出文本显示 gbk 编码错误问题
2018/07/13 Python
python3.6实现学生信息管理系统
2019/02/21 Python
python面试题小结附答案实例代码
2019/04/11 Python
在Pycharm中调试Django项目程序的操作方法
2019/07/17 Python
Django1.11配合uni-app发起微信支付的实现
2019/10/12 Python
python实现四人制扑克牌游戏
2020/04/22 Python
印度尼西亚在线时尚购物网站:ZALORA印尼
2016/08/02 全球购物
Exoticca英国:以最优惠的价格提供豪华异国情调旅行
2018/10/18 全球购物
加拿大的标志性百货公司:Hudson’s Bay(哈得逊湾)
2019/09/03 全球购物
毕业生的自我鉴定该怎么写
2013/12/02 职场文书
大学生安全责任书
2014/07/25 职场文书
导游词之上海豫园
2019/10/24 职场文书
Golang 使用Map实现去重与set的功能操作
2021/04/29 Golang
Django rest framework如何自定义用户表
2021/06/09 Python
详解SpringBoot异常处理流程及原理
2021/06/21 Java/Android
weblogic服务建立数据源连接测试更新mysql驱动包的问题及解决方法
2022/01/22 MySQL