angular学习之关于ng-class详解
1，定义和用法
ng-class 指令用于给 HTML 元素动态绑定一个或多个 CSS 类。
ng-class 指令的值可以是字符串，对象，或一个数组。
如果是字符串，多个类名使用空格分隔。
如果是对象，需要使用 key-value 对，key 为你想要添加的类名，value 是一个布尔值。只有在 value 为 true 时类才会被添加。
如果是数组，可以由字符串或对象组合组成，数组的元素可以是字符串或对象。
2.主要用法有三种
第一种双向数据绑定格式的不推荐所以就不列举了
第二种：通过字符串数组的形式来改变（这种是元素只拥有两种状态）
<style>
.red{
background: red;
}
.green{
background: green;
}
</style>
</head>
<body ng-app="myApp" ng-controller="Aaa">
<div ng-class="{true:'red',false:'green'}[flag]">我会变颜色</div>
<button type="button" ng-click="flag=!flag">点我</button>
</body>
第三种：通过key/value的方式（这种元素可以有多种状态）
<style>
.red{
background: red;
}
.green{
background: green;
}
</style>
<script>
var m1=angular.module("myApp",[]);
m1.controller("Aaa",function($scope){
$scope.ws=true;
});
</script>
</head>
<body ng-app="myApp" ng-controller="Aaa">
<div ng-class="{'red':ws,'green':dq}">ewsdfasdfasdf</div>
</body>
2.其他用法
1.与ng-repeat一起使用：
<style>
.red{
background: red;
}
.green{
background: green;
}
</style>
<script>
var m1=angular.module('myApp',[]);
m1.controller('Aaa',function($scope){
$scope.names=["ws","dq","cy"];
});
</script>
</head>
<body ng-app="myApp">
<ul ng-controller="Aaa">
<li ng-repeat="name in names" ng-class="{red:$even,green:$odd}">{{name}}</li>
</ul>
</body>
3.ng-style的使用
<div ng-style ="{color:'red'}"></div>
angular学习之关于ng-class详解的更多相关文章
- Java学习-007-Log4J 日志记录配置文件详解及实例源代码
此文主要讲述在初学 Java 时,常用的 Log4J 日志记录配置文件详解及实例源代码整理.希望能对初学 Java 编程的亲们有所帮助.若有不足之处,敬请大神指正,不胜感激!源代码测试通过日期为:20 ...
- Python学习一：序列基础详解
作者:NiceCui 本文谢绝转载,如需转载需征得作者本人同意,谢谢. 本文链接:http://www.cnblogs.com/NiceCui/p/7858473.html 邮箱:moyi@moyib ...
- Python学习二：词典基础详解
作者:NiceCui 本文谢绝转载,如需转载需征得作者本人同意,谢谢. 本文链接:http://www.cnblogs.com/NiceCui/p/7862377.html 邮箱:moyi@moyib ...
- IP2——IP地址和子网划分学习笔记之《子网掩码详解》
2018-05-04 16:21:21 在学习掌握了前面的<进制计数><IP地址详解>这两部分知识后,要学习子网划分,首先就要必须知道子网掩码,只有掌握了子网掩码这部分内容 ...
- Linux学习之文件特殊权限详解(SetUID、SetGID、Sticky BIT)(十一)
Linux学习之文件特殊权限详解(SetUID.SetGID.Sticky BIT) 目录 SetUID SetGID Sticky BIT SetUID SetUID简介 只有可以执行的二进制程序和 ...
- Flume NG 配置详解（转）
原文链接:[转]Flume NG 配置详解 (说明,名词对应解释 源-Source,接收器-Sink,通道-Channel) 配置 设置代理 Flume代理配置存储在本地配置文件.这是一个文本文件格式 ...
- 重新学习MySQL数据库7：详解MyIsam与InnoDB引擎的锁实现
重新学习Mysql数据库7:详解MyIsam与InnoDB引擎的锁实现 说到锁机制之前,先来看看Mysql的存储引擎,毕竟不同的引擎的锁机制也随着不同. 三类常见引擎: MyIsam :不支持事务,不 ...
- 《从0到1学习Flink》—— Flink 配置文件详解
前面文章我们已经知道 Flink 是什么东西了,安装好 Flink 后,我们再来看下安装路径下的配置文件吧. 安装目录下主要有 flink-conf.yaml 配置.日志的配置文件.zk 配置.Fli ...
- 002——Angular 目录结构分析、app.module.ts 详解、以及 Angular 中创建组件、组件 详解、 绑定数据
一.目录结构分析 二. app.module.ts.组件分析 1.app.module.ts 定义 AppModule,这个根模块会告诉 Angular 如何组装该应用. 目前,它只声明了 AppCo ...
- [转载]JavaEE学习篇之——JQuery技术详解
原文链接:http://blog.csdn.net/jiangwei0910410003/article/details/32102187 1.简介2.工具3.jQuery对象 1.DOM对象转化成j ...
随机推荐
- SMTP Error: Could not connect to SMTP host
PHPMailer是一个非常棒的开源邮件类,使用也非常简单,但是对于虚拟主机来说,往往要受到各种限制.刚才我在虚拟主机上使用PHPMailer就遇到一个“SMTP Error: Could not c ...
- [软件测试基础２]基于selenium的自动化测试
这次上机我们主要使用Selenium进行自动化测试,首先我们需要下载selenium-java的依赖项. 若使用maven管理项目,则在.pom文件中加入如下依赖项: <dependency&g ...
- 从单幅图像高质量去除运动模糊——读JiaYaJia同名英文论文总结
原始论文在这里 http://www.cse.cuhk.edu.hk/leojia/projects/motion_deblurring/ 一.概述 论文根据以下的基本模糊图像模型建立 其中I是我们观 ...
- 理解JAVA - 面向对象(object) - 属性，方法
理解JAVA - 面向对象(object) - 属性,方法 多态的体现: 向上造型,父类接收子类对象:向上造型: 从父类角度看不到子类独有的方法:面向对象,人类认知世界的方式:生活中每天都 ...
- log4net 按时间输出日志
参考:(转)非常完善的Log4net详细说明 log4net 按天与按小时记日志的配置 Log4net 中输出日志到文件,文件名根据日期生成 log4net按日志级别(debug,info,warn, ...
- 【杂记】Asp.Net 篇
51.app.config 连接字符串 <?xml version="1.0" encoding="utf-8"?> <configurati ...
- （转）SVN服务器搭建和使用（一）
Subversion是优秀的版本控制工具,其具体的的优点和详细介绍,这里就不再多说. 首先来下载和搭建SVN服务器. 现在Subversion已经迁移到apache网站上了,下载地址: http:// ...
- javascript获取当前url
在WEB开发中,许多开发者都比较喜欢使用javascript来获取当前url网址,本文就此为大家总结一下比较常用获取URL的javascript实现代码,以下示例是前面为相应实现方法,后面是获取URL ...
- swift 判断字符串长度
projectName.lengthOfBytes(using: String.Encoding(rawValue: String.Encoding.utf16.rawValue)) > 0
- H5新特性 input type=date 在手机上默认提示显示无效解决办法
目前PC端对input 的date类型支持不好,我试下来的结果是只有chrome支持.firefox.IE11 都不支持.而且PC端有很多日历控件可供使用.就不去多考虑这点了. 那么在移动端的话,io ...