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 相关文章推荐
jscript之Read an Excel Spreadsheet
Jun 13 Javascript
JQuery动态创建DOM、表单元素的实现代码
Aug 09 Javascript
JS实现图片翻书效果示例代码
Sep 09 Javascript
javascript继承的六大模式小结
Apr 13 Javascript
使用jQuery mobile库检测url绝对地址和相对地址的方法
Dec 04 Javascript
一种新的javascript对象创建方式Object.create()
Dec 28 Javascript
AngularJS删除路由中的#符号的方法
Sep 20 Javascript
基于slideout.js实现移动端侧边栏滑动特效
Nov 28 Javascript
jQuery实现的背景颜色渐变动画效果示例
Mar 24 jQuery
JavaScript选择排序算法原理与实现方法示例
Aug 06 Javascript
vue中实现高德定位功能
Dec 03 Javascript
js判断非127开头的IP地址的实例代码
Jan 05 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
isset和empty的区别
2007/01/15 PHP
Smarty foreach控制循环次数的一些方法
2015/07/01 PHP
PHP匿名函数(闭包函数)详解
2019/03/22 PHP
php源码的使用方法讲解
2019/09/26 PHP
JS启动应用程序的一个简单例子
2008/05/11 Javascript
最佳的addEvent事件绑定是怎样诞生的
2011/10/24 Javascript
Js 回车换行处理的办法及replace方法应用
2013/01/24 Javascript
JS实现图片平面旋转的方法
2016/03/01 Javascript
jQuery实现鼠标经过像翻页和描点链接效果
2016/08/08 Javascript
jQuery实现ajax无刷新分页页码控件
2017/02/28 Javascript
JS实现的ajax和同源策略(实例讲解)
2017/12/01 Javascript
JavaScript代码实现txt文件的上传预览功能
2018/03/27 Javascript
使用Javascript简单计算器
2018/11/17 Javascript
如何基于vue-cli3.0构建功能完善的移动端架子
2019/04/24 Javascript
vue组件传值的实现方式小结【三种方式】
2020/02/05 Javascript
在VUE style中使用data中的变量的方法
2020/06/19 Javascript
[04:49]期待西雅图之战 2016国际邀请赛中国区预选赛WINGS战队赛后采访
2016/06/29 DOTA
python 美化输出信息的实例
2018/10/15 Python
win7 x64系统中安装Scrapy的方法
2018/11/18 Python
基于python实现百度翻译功能
2019/05/09 Python
Python容器使用的5个技巧和2个误区总结
2019/09/26 Python
Python函数的返回值、匿名函数lambda、filter函数、map函数、reduce函数用法实例分析
2019/12/26 Python
python实现3D地图可视化
2020/03/25 Python
celery在python爬虫中定时操作实例讲解
2020/11/27 Python
HTML5的Video标签有部分MP4无法播放的问题解析(多图)
2017/08/18 HTML / CSS
20世纪40年代连衣裙和复古服装:The Seamstress Of Bloomsbury
2018/07/24 全球购物
拉飞逸官网:Lafayette 148 New York
2020/07/15 全球购物
大学活动总结范文
2014/04/29 职场文书
公司踏青活动方案
2014/08/16 职场文书
大学社团招新的通讯稿
2014/09/10 职场文书
2014年个人工作总结范文
2014/11/07 职场文书
二年级上册数学教学计划
2015/01/20 职场文书
大学学生会辞职信
2015/05/13 职场文书
2015高中教师个人工作总结
2015/07/21 职场文书
关于践行三严三实的心得体会
2016/01/05 职场文书
《全神贯注》教学反思
2016/02/22 职场文书