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 相关文章推荐
JS实现同时搜索百度和必应的方法
Jan 27 Javascript
浅析javascript中的事件代理
Nov 06 Javascript
分享一个原生的JavaScript拖动方法
Sep 25 Javascript
js实现hashtable的赋值、取值、遍历操作实例详解
Dec 25 Javascript
JS日程管理插件FullCalendar简单实例
Feb 07 Javascript
React 子组件向父组件传值的方法
Jul 24 Javascript
vue2.0的虚拟DOM渲染思路分析
Aug 09 Javascript
基于vue通用表单解决方案的思考与分析
Mar 16 Javascript
深入了解响应式React Native Echarts组件
May 29 Javascript
如何通过vscode运行调试javascript代码
Jul 24 Javascript
vue实现日历表格(element-ui)
Sep 24 Javascript
vue组件的路由高亮问题解决方法
May 11 Vue.js
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实现多进程并行操作的详解(可做守护进程)
2013/06/18 PHP
php中adodbzip类实例
2014/12/08 PHP
PHP过滤器 filter_has_var() 函数用法实例分析
2020/04/23 PHP
javascript基础之查找元素的详细介绍(访问节点)
2013/07/05 Javascript
jQuery简单实现banner图片切换
2014/01/02 Javascript
Nodejs实现批量下载妹纸图
2015/05/28 NodeJs
第一次接触神奇的Bootstrap菜单和导航
2016/08/01 Javascript
Bootstrap源码解读网格系统(3)
2016/12/22 Javascript
原生javascript移动端滑动banner效果
2017/03/10 Javascript
Vue AST源码解析第一篇
2017/07/19 Javascript
浅谈angular2 组件的生命周期钩子
2017/08/12 Javascript
js判断节假日实例代码
2017/12/27 Javascript
React Native中NavigatorIOS组件的简单使用详解
2018/01/27 Javascript
jQuery实现遍历XML节点和属性的方法示例
2018/04/29 jQuery
通过jquery.cookie.js实现记住用户名、密码登录功能
2018/06/20 jQuery
vue动态注册组件实例代码详解
2019/05/30 Javascript
Vue项目中使用WebUploader实现文件上传的方法
2019/07/21 Javascript
vuex actions异步修改状态的实例详解
2019/11/06 Javascript
Python中for循环控制语句用法实例
2015/06/02 Python
开始着手第一个Django项目
2015/07/15 Python
Python实现公历(阳历)转农历(阴历)的方法示例
2017/08/22 Python
Python机器学习库scikit-learn安装与基本使用教程
2018/06/25 Python
Python实现京东秒杀功能代码
2019/05/16 Python
python连接PostgreSQL过程解析
2020/02/09 Python
Pandas之read_csv()读取文件跳过报错行的解决
2020/04/21 Python
百丽国际旗下购物网站:优购
2017/02/28 全球购物
德国便宜的宠物店:Brekz.de
2020/10/23 全球购物
什么是Smart Navigation?
2016/07/03 面试题
网络程序员自荐信
2014/01/25 职场文书
小学生元旦感言
2014/02/26 职场文书
法学院毕业生求职信
2014/06/25 职场文书
党的群众路线剖析材料
2014/10/09 职场文书
2015党建工作简报
2015/07/21 职场文书
javascript canvas实现雨滴效果
2021/06/09 Javascript
MySQL之select、distinct、limit的使用
2021/11/11 MySQL
pytorch实现加载保存查看checkpoint文件
2022/07/15 Python