AngularJS入门教程之ng-class 指令用法


Posted in Javascript onAugust 01, 2016

AngularJS ng-class 指令

AngularJS 实例

修改 <div> 元素的类:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<style>
.sky {
 color:white;
 background-color:lightblue;
 padding:20px;
 font-family:"Courier New";
}
.tomato {
 background-color:coral;
 padding:40px;
 font-family:Verdana;
}
</style>
</head>
<body ng-app="">

<p>选择一个类:</p>

<select ng-model="home">
<option value="sky">天空色</option>
<option value="tomato">番茄色</option>
</select>

<div ng-class="home">
 <h1>Welcome Home!</h1>
 <p>I like it!</p>
</div>

</body>
</html>

定义和用法

ng-class 指令用于给 HTML 元素动态绑定一个或多个 CSS 类。

ng-class 指令的值可以是字符串,对象,或一个数组。

如果是字符串,多个类名使用空格分隔。

如果是对象,需要使用 key-value 对,key 是一个布尔值,value 为你想要添加的类名。只有在 key 为 true 时类才会被添加。

如果是数组,可以由字符串或对象组合组成,数组的元素可以是字符串或对象。

语法

<element ng-class="expression"></element>

所有的 HTML 元素都支持。

参数值

描述
expression 表达式返回一个或多个类名。

以上就是对AngularJS ng-class 指令资料的整理,有需要的朋友参考下。

Javascript 相关文章推荐
Javascript解决常见浏览器兼容问题的12种方法
Jan 04 Javascript
手把手教你自己写一个js表单验证框架的方法
Sep 14 Javascript
jQuery 选择器、DOM操作、事件、动画
Nov 25 Javascript
js获取input标签的输入值实现代码
Aug 05 Javascript
nodeType属性返回被选节点的节点类型介绍
Nov 22 Javascript
jQuery实现鼠标划过修改样式的方法
Apr 14 Javascript
JavaScript在Android的WebView中parseInt函数转换不正确问题解决方法
Apr 25 Javascript
javascript实现获取指定精度的上传文件的大小简单实例
Oct 25 Javascript
egg.js的基本使用和调用数据库的方法示例
May 18 Javascript
jQuery实现评论模块
Aug 19 jQuery
js操作两个json数组合并、去重,以及删除某一项元素
Sep 22 Javascript
React 条件渲染最佳实践小结(7种)
Sep 27 Javascript
Three.js学习之正交投影照相机
Aug 01 #Javascript
jQuery简单实现iframe的高度根据页面内容自适应的方法
Aug 01 #Javascript
JQuery之proxy实现绑定代理方法
Aug 01 #Javascript
AngularJS入门教程之ng-checked 指令详解
Aug 01 #Javascript
浅谈JavaScript中面向对象的的深拷贝和浅拷贝
Aug 01 #Javascript
Javascript OOP之面向对象
Jul 31 #Javascript
JavaScript的字符串方法汇总
Jul 31 #Javascript
You might like
强烈推荐:php.ini中文版(1)
2006/10/09 PHP
在WordPress中使用wp-cron插件来设置定时任务
2015/12/10 PHP
PHP文件缓存smarty模板应用实例分析
2016/02/26 PHP
PHP获取不了React Native Fecth参数的解决办法
2016/08/26 PHP
PHP一个简单的无需刷新爬虫
2019/01/05 PHP
仿迅雷焦点广告效果(JQuery版)
2008/11/19 Javascript
JavaScript对象和字串之间的转换实例探讨
2013/04/21 Javascript
js判断字符长度及中英文数字等
2014/03/19 Javascript
JavaScript中的prototype.bind()方法介绍
2014/04/04 Javascript
分享javascript计算时间差的示例代码
2020/03/19 Javascript
jQuery Ajax 实例代码 ($.ajax、$.post、$.get)
2016/04/29 Javascript
jquery插件bootstrapValidator表单验证详解
2016/12/15 Javascript
Vue 2.0 服务端渲染入门介绍
2017/03/29 Javascript
vue实现app页面切换动画效果实例
2017/05/23 Javascript
Vue.js devtool插件安装后无法使用的解决办法
2017/11/27 Javascript
vue使用axios实现文件上传进度的实时更新详解
2017/12/20 Javascript
React优化子组件render的使用
2019/05/12 Javascript
详解mpvue开发微信小程序基础知识
2019/09/23 Javascript
JavaScript如何处理移动端拍摄图片旋转问题
2019/11/16 Javascript
Vue实现计算器计算效果
2020/08/17 Javascript
Python设计模式之抽象工厂模式原理与用法详解
2019/01/15 Python
11个Python3字典内置方法大全与示例汇总
2019/05/13 Python
Python实现Canny及Hough算法代码实例解析
2020/08/06 Python
用python查找统一局域网下ip对应的mac地址
2021/01/13 Python
利用python实现后端写网页(flask框架)
2021/02/28 Python
美国婴儿用品及配件购买网站:Munchkin
2019/04/03 全球购物
西班牙在线宠物食品和配件商店:bitiba
2019/10/11 全球购物
一年级班主任感言
2014/03/08 职场文书
教师党员个人自我剖析材料
2014/09/29 职场文书
2014保险公司内勤工作总结
2014/12/16 职场文书
实习计划书范文
2015/01/16 职场文书
农业项目合作意向书
2015/05/08 职场文书
女性健康知识讲座主持词
2015/07/04 职场文书
python爬取网页版QQ空间,生成各类图表
2021/06/02 Python
php实现自动生成验证码的实例讲解
2021/11/17 PHP
Nginx限流和黑名单配置
2022/05/20 Servers