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 相关文章推荐
jquery 最简单易用的表单验证插件
Feb 27 Javascript
js 使用form表单select类实现级联菜单效果
Dec 19 Javascript
判断及设置浏览器全屏模式
Apr 20 Javascript
jquery实现鼠标滑过显示二级下拉菜单效果
Aug 24 Javascript
jQuery+Ajax实现无刷新分页
Oct 30 Javascript
Bootstrap导航栏各元素操作方法(表单、按钮、文本)
Dec 28 Javascript
js实现上传图片及时预览
May 07 Javascript
JS代码实现table数据分页效果
May 26 Javascript
js实现随机抽选效果、随机抽选红色球效果
Jan 13 Javascript
微信小程序用户授权弹窗 拒绝时引导用户重新授权实现
Jul 29 Javascript
JS实现网页时钟特效
Mar 25 Javascript
Vue +WebSocket + WaveSurferJS 实现H5聊天对话交互的实例
Nov 18 Vue.js
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
给海燕B411配件机起死回生配上件
2021/03/02 无线电
php 购物车的例子
2009/05/04 PHP
php异常:Parse error: syntax error, unexpected T_ENCAPSED_AND_WHITESPACE  eval()'d code error
2011/05/19 PHP
删除html标签得到纯文本可处理嵌套的标签
2014/04/28 PHP
php通过递归方式复制目录和子目录的方法
2015/03/13 PHP
PHP比较运算符的详细介绍
2015/09/29 PHP
Yii数据库缓存实例分析
2016/03/29 PHP
用javascript获得地址栏参数的两种方法
2006/11/08 Javascript
JavaScript 学习笔记(十四) 正则表达式
2010/01/22 Javascript
ASP.NET jQuery 实例1(在TextBox里面创建一个默认提示)
2012/01/13 Javascript
JavaScript调用堆栈及setTimeout使用方法深入剖析
2013/02/16 Javascript
jquery对象和DOM对象的区别介绍
2013/08/09 Javascript
浅谈angularjs module返回对象的坑(推荐)
2016/10/21 Javascript
jQuery+PHP+Mysql实现抽奖程序
2020/04/12 jQuery
详解HTTPS 的原理和 NodeJS 的实现
2017/07/04 NodeJs
vue select选择框数据变化监听方法
2018/08/24 Javascript
使用Object.defineProperty如何巧妙找到修改某个变量的准确代码位置
2018/11/02 Javascript
node crawler如何添加promise支持
2020/02/01 Javascript
[08:04]TI4西雅图DOTA2前线报道 海涛探访各路人马
2014/07/09 DOTA
记录Django开发心得
2014/07/16 Python
详解Python3.6安装psutil模块和功能简介
2018/05/30 Python
对Python subprocess.Popen子进程管道阻塞详解
2018/10/29 Python
Python实现繁体中文与简体中文相互转换的方法示例
2018/12/18 Python
Python绘制频率分布直方图的示例
2019/07/08 Python
Python全栈之列表数据类型详解
2019/10/01 Python
原生python实现knn分类算法
2019/10/24 Python
Python Pillow.Image 图像保存和参数选择方式
2020/01/09 Python
Numpy一维线性插值函数的用法
2020/04/22 Python
python轮询机制控制led实例
2020/05/03 Python
Brasty罗马尼亚:购买手表、香水、化妆品、珠宝
2020/04/21 全球购物
生日寄语大全
2014/04/08 职场文书
教育系统干部作风整顿心得体会
2014/09/09 职场文书
小学生五年级大队长竞选发言稿
2014/09/12 职场文书
民主评议政风行风整改方案
2014/09/17 职场文书
导游词之潮音寺
2019/09/26 职场文书
Python中的matplotlib绘制百分比堆叠柱状图,并为每一个类别设置不同的填充图案
2022/04/20 Python