AngularJS中ng-class用法实例分析


Posted in Javascript onJuly 06, 2017

本文实例讲述了AngularJS中ng-class用法。分享给大家供大家参考,具体如下:

使用 ng-class 动态设置元素的类,方法是绑定一个代表所有需要添加的类的表达式。重复的类不会添加。当表达式发生变化,先前添加的类会被移除,新类会被添加。

在angular中为我们提供了3种方案:

① 通过数据的双向绑定(不推荐使用)
② 通过对象数组。
③ 通过key/value

一、通过数据双向绑定:

function changeClass(){
 $scope.className = "change2";
}
<div class="{{className}}"></div>

二、通过字符串数组的形式来改变

<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>

三、通过key/value

function Ctr($scope) {
}
<div ng-class {'selected': isSelected, 'car': isCar}">
</div>

说明:当isSelected为真的时候则添加class  ‘selected'  当isCar为真的时候则添加class  ‘car'

希望本文所述对大家AngularJS程序设计有所帮助。

Javascript 相关文章推荐
鼠标移到div,浮层显示明细,弹出层与div的上边距左边距重合(示例代码)
Dec 14 Javascript
javascript在网页中实现读取剪贴板粘贴截图功能
Jun 07 Javascript
jQuery 3.0 的变化及使用方法
Feb 01 Javascript
懒加载实现的分页&amp;&amp;网站footer自适应
Dec 21 Javascript
jquery中用函数来设置css样式
Dec 22 Javascript
vue中mint-ui环境搭建详细介绍
Apr 06 Javascript
JS实现微信摇一摇原理解析
Jul 22 Javascript
js如何编写简单的ajax方法库
Aug 02 Javascript
对vue中v-on绑定自定事件的实例讲解
Sep 06 Javascript
Vue官方推荐AJAX组件axios.js使用方法详解与API
Oct 09 Javascript
基于vue2.0实现仿百度前端分页效果附实现代码
Oct 30 Javascript
中级前端工程师必须要掌握的27个JavaScript 技巧(干货总结)
Sep 23 Javascript
jQuery 实现图片的依次加载图片功能
Jul 06 #jQuery
JS图片轮播与索引变色功能实例详解
Jul 06 #Javascript
jQuery+ajax实现修改密码验证功能实例详解
Jul 06 #jQuery
vue2.0 keep-alive最佳实践
Jul 06 #Javascript
angular框架实现全选与单选chekbox的自定义
Jul 06 #Javascript
详解Angular Reactive Form 表单验证
Jul 06 #Javascript
让div运动起来 js实现缓动效果
Jul 06 #Javascript
You might like
PHP7 参数处理机制修改
2021/03/09 PHP
Mootools 1.2教程(3) 数组使用简介
2009/09/14 Javascript
Mac/Windows下如何安装Node.js
2013/11/22 Javascript
DOM操作一些常用的属性汇总
2015/03/13 Javascript
jQuery统计指定子元素数量的方法
2015/03/17 Javascript
jQuery中closest和parents的区别分析
2015/05/07 Javascript
Bootstrap学习系列之使用 Bootstrap Typeahead 组件实现百度下拉效果
2016/07/07 Javascript
JavaScript读二进制文件并用ajax传输二进制流的方法
2016/07/18 Javascript
Angularjs中$http以post请求通过消息体传递参数的实现方法
2016/08/05 Javascript
jQuery.ajax 跨域请求webapi设置headers的解决方案
2016/08/08 Javascript
angular源码学习第一篇 setupModuleLoader方法
2016/10/20 Javascript
ES6中Math对象的部分扩展
2017/02/20 Javascript
JavaScript创建对象_动力节点Java学院整理
2017/06/27 Javascript
js中innerText/textContent和innerHTML与target和currentTarget的区别
2019/01/21 Javascript
JavaScript适配器模式原理与用法实例详解
2020/03/09 Javascript
Python 3.x 新特性及10大变化
2015/06/12 Python
Python中 Lambda表达式全面解析
2016/11/28 Python
selenium+python实现自动登录脚本
2018/04/22 Python
Tensorflow卷积神经网络实例
2018/05/24 Python
解决django后台样式丢失,css资源加载失败的问题
2019/06/11 Python
opencv转换颜色空间更改图片背景
2019/08/20 Python
python判断变量是否为int、字符串、列表、元组、字典的方法详解
2020/02/13 Python
通俗讲解python 装饰器
2020/09/07 Python
了解一下python内建模块collections
2020/09/07 Python
毕业生机械建模求职信
2013/10/14 职场文书
情侣吵架检讨书
2014/02/05 职场文书
小学生个人先进事迹材料
2014/05/08 职场文书
本科毕业生应聘自荐信范文
2014/06/26 职场文书
授权委托书(公民个人适用)
2014/09/19 职场文书
小学教师师德师风自我剖析材料
2014/09/29 职场文书
2014年社区党建工作总结
2014/11/11 职场文书
销售内勤岗位职责范本
2015/04/13 职场文书
莫言获奖感言(全文)
2015/07/31 职场文书
护理培训心得体会
2016/01/22 职场文书
2016年小学圣诞节活动总结
2016/03/31 职场文书
用Python编写简单的gRPC服务的详细过程
2021/07/04 Python