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技巧来提高你的代码
Jan 08 Javascript
封装html的select标签的js操作实例
Jul 02 Javascript
JavaScript匿名函数与委托使用示例
Jul 22 Javascript
php利用curl获取远程图片实现方法
Oct 26 Javascript
AngularJS入门教程之静态模板详解
Aug 18 Javascript
ES6所改良的javascript“缺陷”问题
Aug 23 Javascript
js学习之----深入理解闭包
Nov 21 Javascript
详谈表单重复提交的三种情况及解决方法
Aug 16 Javascript
Vue路由钩子之afterEach beforeEach的区别详解
Jul 15 Javascript
vue中使用heatmapjs的示例代码(结合百度地图)
Sep 05 Javascript
在vue中动态添加class类进行显示隐藏实例
Nov 09 Javascript
jQuery插件simplePagination的使用方法示例
Apr 28 jQuery
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
《五等分的花嫁》漫画完结!2020年10月第2期TV动画制作组换血!
2020/03/06 日漫
PHP 文件上传功能实现代码
2009/06/24 PHP
PHP计划任务之关闭浏览器后仍然继续执行的函数
2010/07/22 PHP
提示Trying to clone an uncloneable object of class Imagic的解决
2011/10/27 PHP
PHP 第二节 数据类型之字符串类型
2012/04/28 PHP
jQuery Deferred和Promise创建响应式应用程序详细介绍
2013/03/05 Javascript
JS实现可改变列宽的table实例
2013/07/02 Javascript
JavaScript中的对象的extensible属性介绍
2014/12/30 Javascript
javascript基本包装类型介绍
2015/04/10 Javascript
JavaScript获取一个范围内日期的方法
2015/04/24 Javascript
jq实现左侧显示图片右侧文字滑动切换效果
2015/08/04 Javascript
javascript:void(0)是什么意思及href=#与href=javascriptvoid(0)的区别
2015/11/13 Javascript
谈谈我对JavaScript中typeof和instanceof的深入理解
2015/12/25 Javascript
JS组件Bootstrap实现弹出框效果代码
2016/04/26 Javascript
浅谈几种常用的JS类定义方法
2016/06/08 Javascript
JS传播事件、取消事件默认行为、阻止事件传播详解
2017/08/14 Javascript
input file样式修改以及图片预览删除功能详细概括(推荐)
2017/08/17 Javascript
Angular 容器部署的方法
2018/04/17 Javascript
小程序实现图片预览裁剪插件
2019/11/22 Javascript
Python Mysql数据库操作 Perl操作Mysql数据库
2009/01/12 Python
一文带你了解Python中的字符串是什么
2018/11/20 Python
浅谈python下含中文字符串正则表达式的编码问题
2018/12/07 Python
在pycharm中使用git版本管理以及同步github的方法
2019/01/16 Python
pandas通过字典生成dataframe的方法步骤
2019/07/23 Python
Python多分支if语句的使用
2020/09/03 Python
详解python 支持向量机(SVM)算法
2020/09/18 Python
pytorch Dataset,DataLoader产生自定义的训练数据案例
2021/03/03 Python
使用canvas一步步实现图片打码功能的方法
2019/06/17 HTML / CSS
鞋类设计与工艺专业销售求职信
2013/11/01 职场文书
大学生自我鉴定
2013/12/08 职场文书
审计工作个人的自我评价
2013/12/25 职场文书
给国外客户的邀请函
2014/01/30 职场文书
2014年班主任工作总结
2014/11/08 职场文书
酒店前台岗位职责
2015/04/16 职场文书
pytorch锁死在dataloader(训练时卡死)
2021/05/28 Python
ICOM R71E和R72E图文对比解说
2022/04/07 无线电