angular学习笔记(九)-css类和样式1
本篇主要介绍通过数据绑定来给元素添加特定的类名,从而应用特定的样式
从一个最基本的例子来看:
<!DOCTYPE html>
<html ng-app>
<head>
<title>6.1css类和样式</title>
<meta charset="utf-8">
<script src="../angular.js"></script>
<script src="script.js"></script>
<style type="text/css">
.submit-false {
background:#efefef; color:#ccc
}
button {
border:1px solid #ccc; outline:0
}
</style>
</head>
<body>
<div ng-controller="ButtonDisable">
<button class="submit-{{disable}}" ng-click="deActive()">提交</button>
</div>
</body>
</html>
一个提交的按钮,点击以后就会被禁用,显示为灰色:
给button添加类名submit-{{disable}},这样,disable的改变,就会引起button类名的改变,
当disable变量值为false时,就会拼接成submit-false类名,运用相对应的样式
function ButtonDisable ($scope){
$scope.disable = true;
$scope.deActive = function(){
$scope.disable = false
}
}
原始状态:
点击一次以后:
angular学习笔记(九)-css类和样式1的更多相关文章
- angular学习笔记(九)-css类和样式3
再来看一个选择li列表的例子: 点击li中的任意项,被点击的li高亮显示: <!DOCTYPE html> <html ng-app> <head> <tit ...
- angular学习笔记(九)-css类和样式2
在上一个例子中,元素的类名使用拼接的方法,这样,类名中就不得不带有true或false,并且不易维护,所以,angular使用ng-class属性来控制元素的类名: 我们来看一个小例子,点击error ...
- 前端学习笔记——引入css文件、样式优先级
CSS样式的引用方式有三种:行间样式表>内部样式表>外部样式表. 如果只有一种样式,那么优先级“由内到外 由近到远” 1.行间样式表--内联方式 内联方式指的是直接在 HTML 标签中的 ...
- HTML+CSS学习笔记 (7) - CSS样式基本知识
HTML+CSS学习笔记 (7) - CSS样式基本知识 内联式css样式,直接写在现有的HTML标签中 CSS样式可以写在哪些地方呢?从CSS 样式代码插入的形式来看基本可以分为以下3种:内联式.嵌 ...
- angular学习笔记(三十)-指令(2)-restrice,replace,template
本篇主要讲解指令中的 restrict属性, replace属性, template属性 这三个属性 一. restrict: 字符串.定义指令在视图中的使用方式,一共有四种使用方式: 1. 元素: ...
- angular学习笔记(三十)-指令(10)-require和controller
本篇介绍指令的最后两个属性,require和controller 当一个指令需要和父元素指令进行通信的时候,它们就会用到这两个属性,什么意思还是要看栗子: html: <outer‐direct ...
- 前端学习:学习笔记(CSS部分)
前端学习:学习笔记(CSS部分) CSS的学习总结(图解) CSS的引入方式和书写规范 CSS的插入方式_内嵌样式 <!DOCTYPE html> <html> <hea ...
- Typescript 学习笔记五:类
中文网:https://www.tslang.cn/ 官网:http://www.typescriptlang.org/ 目录: Typescript 学习笔记一:介绍.安装.编译 Typescrip ...
- 多线程学习笔记九之ThreadLocal
目录 多线程学习笔记九之ThreadLocal 简介 类结构 源码分析 ThreadLocalMap set(T value) get() remove() 为什么ThreadLocalMap的键是W ...
随机推荐
- web中的安全编码
个人记录 一.Web安全验证 输入验证 防范跨站脚本XSS攻击 防止SQL注入 图片验证码 二.输入验证 经典的安全法则:永远不要相信用户提交的数据 验证内容: 用户名,密码等格式 验证长度防止数据库 ...
- MySQL单列索引和组合索引(联合索引)的区别详解
发现index merge局限性,优化器会自动判断是否使用 index merge 优化技术,查询还是需要组合索引[推荐阅读:对mysql使用索引的误解] MySQL单列索引和组合索引(联合索引)的区 ...
- html5 效果 按下鼠标数值自动增长
<!doctype html> <html> <head> <style> * { margin:0; padding:0; } div { margi ...
- JDBC实例--通过连接工具类DBUtil +配置文件来获取连接数据库,方便又快捷
根据前面的连接方法,还有缺点就是,如果人家要换数据库,还得改动源代码,然后还要编译什么的.这样客户修改也不容易. 做法:我们写一个配置文件,把该数据写在配置文件上面,然后通过类来加载改文件,然后读取相 ...
- 科普:TLS、SSL、HTTPS以及证书(转)
最近在研究基于ssl的传输加密,涉及到了key和证书相关的话题,走了不少弯路,现在总结一下做个备忘 不少人可能听过其中的超过3个名词,但它们究竟有什么关联呢? TLS是 传输层安全协议(Transpo ...
- 华硕M2A-VM+AMD4000超频方法
华硕M2A-VM+AMD4000超频方法2009-07-07 09:42 1.4000+默认外频为200,倍频已经锁定为10.5,实际运行频率为2100HZ.超频是通过提高外频来实现的,只要适当提高外 ...
- Oracle快速克隆安装
Oracle的家目录进行快速克隆,对同类型机器配置很高效的! 01.确认你在克隆数据库时,原数据库已经关闭 sqlplus / as sysdba; shutdown immediate ; ...
- My Sql 高效分页
/* *普通分页 *在数据文件上偏移1000000查出10条 */ select * from zoldesk_92game_net_ecms_bj where classid=303 ORDER B ...
- 在ListView的右边添加字母列表
在ListView的右边添加字母列表,点击某个字母时,列表就滚动到预期位置. <!-- 数字和字母栏在标题栏下边并且停靠在右边 --> <com.txrj.sms.component ...
- 史上最全的iOS面试题及答案,且看且珍藏,错过就没有喽!
1. Object-c的类可以多重继承么?可以实现多个接口么?Category是什么?重写一个类的方式用继承好还是分类好?为什么? 答:Object-c的类不可以多重继承;可以实现多个接口,通过实现多 ...