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 ...
随机推荐
- Struts2(八)访问Servlet API
一.Struts2中的Servlet API 1.1.struts2的Action实现了MVC中C层的作用 针对请求用户显示不同的信息 登录后段保存用户信息 ----session 保存当前在线人数等 ...
- Spring -- 三种配置方式
1.Explicit configuration in XML:显示的XML配置. 优点: 1)XML配置方式进一步降低了耦合,使得应用更加容易扩展,即使对配置文件进一步修改也不需要工程进行修改和重新 ...
- crontab 格式
- raise语句
# -*- coding: utf-8 -*- #python 27 #xiaodeng #Python学习手册 868 #raise语句 res=[IndexError,TypeError] #ra ...
- Tomcat跨二级域配置
内容转自:http://blog.csdn.net/luka2008/article/details/38385703/,请直接看原文,不过这篇“原文”也是转的... 1,Tomcat下 代码: im ...
- HDUOJ----湫湫系列故事——减肥记I
湫湫系列故事——减肥记I Time Limit: 3000/1000 MS (Java/Others) Memory Limit: 65535/32768 K (Java/Others)Tota ...
- Python 的 Matplotlib 画图库
Matplotlib安装 NumPy库方便数值运算,但枯燥的数据并不利于人们的直观理解. 数据需要可视化. Matplotlib:一个数据可视化函数库 使用前需要安装 利用Python自带 ...
- 商业规则引擎IBM WebSphere ILog JRules概述,开发基础教程
Ilog Jrules开发基础教程有7篇,地址规则引擎Ilog Jrules开发基础教程[连载1]-- 概述篇 概述篇 规则引擎是一种嵌套在应用程序中的组件,它实现了将业务规则从应用程序代码中分离出来 ...
- Chrome浏览器桌面通知提示设置
版本 24.0.1312.56 m 老版本23.* 桌面通知,也可以由用户在Chrome浏览器中自定义:板手 -> 选项 -> 高级选项 –> 通知 (管理例外情况…).
- js 停止事件冒泡 阻止浏览器的默认行为(阻止超连接 #)
在前端开发工作中,由于浏览器兼容性等问题,我们会经常用到“停止事件冒泡”和“阻止浏览器默认行为”. 1..停止事件冒泡 JavaScript代码 //如果提供了事件对象,则这是一个非IE浏览器if ( ...