本篇主要介绍通过数据绑定来给元素添加特定的类名,从而应用特定的样式

从一个最基本的例子来看:

<!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的更多相关文章

  1. angular学习笔记(九)-css类和样式3

    再来看一个选择li列表的例子: 点击li中的任意项,被点击的li高亮显示: <!DOCTYPE html> <html ng-app> <head> <tit ...

  2. angular学习笔记(九)-css类和样式2

    在上一个例子中,元素的类名使用拼接的方法,这样,类名中就不得不带有true或false,并且不易维护,所以,angular使用ng-class属性来控制元素的类名: 我们来看一个小例子,点击error ...

  3. 前端学习笔记——引入css文件、样式优先级

    CSS样式的引用方式有三种:行间样式表>内部样式表>外部样式表. 如果只有一种样式,那么优先级“由内到外 由近到远” 1.行间样式表--内联方式 内联方式指的是直接在 HTML 标签中的  ...

  4. HTML+CSS学习笔记 (7) - CSS样式基本知识

    HTML+CSS学习笔记 (7) - CSS样式基本知识 内联式css样式,直接写在现有的HTML标签中 CSS样式可以写在哪些地方呢?从CSS 样式代码插入的形式来看基本可以分为以下3种:内联式.嵌 ...

  5. angular学习笔记(三十)-指令(2)-restrice,replace,template

    本篇主要讲解指令中的 restrict属性, replace属性, template属性 这三个属性 一. restrict: 字符串.定义指令在视图中的使用方式,一共有四种使用方式: 1. 元素: ...

  6. angular学习笔记(三十)-指令(10)-require和controller

    本篇介绍指令的最后两个属性,require和controller 当一个指令需要和父元素指令进行通信的时候,它们就会用到这两个属性,什么意思还是要看栗子: html: <outer‐direct ...

  7. 前端学习：学习笔记（CSS部分）

    前端学习:学习笔记(CSS部分) CSS的学习总结(图解) CSS的引入方式和书写规范 CSS的插入方式_内嵌样式 <!DOCTYPE html> <html> <hea ...

  8. Typescript 学习笔记五：类

    中文网:https://www.tslang.cn/ 官网:http://www.typescriptlang.org/ 目录: Typescript 学习笔记一:介绍.安装.编译 Typescrip ...

  9. 多线程学习笔记九之ThreadLocal

    目录 多线程学习笔记九之ThreadLocal 简介 类结构 源码分析 ThreadLocalMap set(T value) get() remove() 为什么ThreadLocalMap的键是W ...

随机推荐

  1. Hibernate(十四)缓存

    一.什么是缓存 缓存是介于应用程序和永久必数据存储源之间,目的是为了降低应用程序直接读写永久必数据存储源的频率,从而提高运行性能 缓存通常是在内存中的如: Office中的Word.excel Hib ...

  2. WQL语言简介和WQL测试工具wbemtest.exe使用方法详细介绍

    这篇文章主要介绍了WQL语言简介和WQL测试工具wbemtest.exe使用方法详细介绍,WQL是指Windows管理规范查询语言,需要的朋友可以参考下 WQL就是WMI中的查询语言,WQL的全称是W ...

  3. 克隆server2008R2造成SID冲突

    在云上搞的虚拟机,安装5台winserver2008r2,搭域环境,域环境搭好之后,改域用户为管理员,死活更改不成功,之前在测试环境搞域环境时碰到克隆镜像系统全部还原后搭建域环境不成功的情况,后来全部 ...

  4. ajax-原理分析

      createTime--2016年9月19日13:59:11Author:Marydon参考链接 http://blog.csdn.net/csh624366188/article/details ...

  5. Struts2的配置文件的配置struts.xml

    在学习struts的时候,我们一定要掌握struts2的工作原理. 仅仅有当我们明白了在struts2框架的内部架构的实现过程.在配置整个struts 的框架时.能够非常好的进行逻辑上的配置.接下来我 ...

  6. 统计一个文件中出现字符'a'的次数

    # -*- coding: utf-8 -*- #python 27 #xiaodeng #统计一个文件中出现字符'a'的次数 #http://www.cnblogs.com/hongten/p/ho ...

  7. xargs详解

    一.场景 这个命令是错误的 find ./ -perm +700 |ls -l 这样才是正确的 find ./ -perm +700 |xargs ls -l  二.用法 [root@localhos ...

  8. 几道比较难的SQL题

    上条记录和下一条记录 在展示博客文章时,在文章底部需要展示上一篇文章和下一篇文章,文章的排序当然是按照时间排序的. 选定下一条时可以用limit 1来实现,选取上一条时可以倒序limit 1实现 (S ...

  9. js访问url和cookie

    function QueryString() { var data = []; this.Read = function() { var aPairs, aTmp; var queryString = ...

  10. 【LeetCode】12. Integer to Roman (2 solutions)

    Integer to Roman Given an integer, convert it to a roman numeral. Input is guaranteed to be within t ...