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

我们来看一个小例子,点击error按钮,顶部提示错误框,点击warning按钮,顶部提示警告框.

错误框的类名是.err,警告框的类名是.warn:

<!DOCTYPE html>

<html ng-app>

<head>

  <title>6.2css类和样式</title>

  <meta charset="utf-8">

  <script src="../angular.js"></script>

  <script src="script.js"></script>

  <style type="text/css">

    *{

      font-family:'MICROSOFT YAHEI';

      font-size:12px

    }

    .tip {

      margin:auto; width:300px; height:30px; line-height:30px; text-align:center;

    }

    .err {

      color:#A91818; background:#F3976C

    }

    .warn {

      color:#F3976C; background:#F6EBBC;

    }

    button {

      border:1px solid #ccc; outline:0

    }

  </style>

</head>

<body>

<div ng-controller = "WarnErr">

  <div>

    <div class="tip" ng-class="{err:ifErr,warn:ifWarn}" ng-show="ifShow">{{tipText}}</div>

  </div>

  <div>

    <button ng-click="showErr()">error</button>

    <button ng-click="showWarn()">warning</button>

  </div>

</div>

</body>

</html>
function WarnErr ($scope){

    $scope.ifShow = false;

    $scope.tipText = '';

    $scope.ifErr = false;

    $scope.ifWarn = false;

    $scope.showErr = function(){

        $scope.ifShow = true;

        $scope.tipText = '错误:';

        $scope.ifWarn = false;

        $scope.ifErr = true;

    };

    $scope.showWarn = function(){

        $scope.ifShow = true;

        $scope.tipText = '警告:';

        $scope.ifErr = false;

        $scope.ifWarn = true;

    }

}
<div class="tip" ng-class="{err:ifErr,warn:ifWarn}" ng-show="ifShow">{{tipText}}</div>

其中,err和warn是待选的类名,":"后面绑定数据,该数据决定了该类名是否会被添加,如果数据的值为true,该类名会被添加,反之则不会被添加

然后通过给按钮绑定点击事件,来改变ifErr和ifWarn的布尔值,改变tip元素的类名,显示不同的提示框

原始状态

点击error按钮后:

点击warning按钮后:

---------------------------------------------------------------------------------------------------------------------------------------------------------------

遗留问题:

1. 没有说到ng-style的用法

2. 属性值的表达式执行的结果不仅仅只有以空格分隔css类名的字符串,也有css类名数组,和css类名到布尔值的映射.但是后面两种的用法不详.

3. 实际的布局中,提示框元素和按钮元素可能非常远. 并且不在同一个div里面,但是他们是需要共享一个控制器的,经过尝试,两个div不能使用同一个控制器.这个问题应该如何解决.

angular学习笔记(九)-css类和样式2的更多相关文章

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

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

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

    本篇主要介绍通过数据绑定来给元素添加特定的类名,从而应用特定的样式 从一个最基本的例子来看: <!DOCTYPE html> <html ng-app> <head> ...

  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. 包装类、object、单例模式、final、抽象类

    /*包装类*/ /*  byte   Byte  short   Short  int    Integer  long   Long  char   Character  float   Float ...

  2. jQuery中first-child与first选择器区别

    1.first-child first-child为每个父级元素匹配第一个子元素,可以匹配出多个元素: 示例代码: <!DOCTYPE html> <html lang=" ...

  3. [Done][DUBBO] dubbo Thread pool is EXHAUSTED!

    异常信息: com.alibaba.dubbo.remoting.ExecutionException: class com.alibaba.dubbo.remoting.transport.disp ...

  4. 自己写的一个读取execl的帮助类

    目标:读取execl的第一个sheet,并传入不需要读取的表头的行数,返回该execl里所有数据的list 解析共有2种:1.DOM      2.SAX import java.io.File; i ...

  5. __str__被print函数调用，目的是打印类的内容到屏幕上

    # -*- coding: utf-8 -*- #python 27 #xiaodeng #__str__被print函数调用,目的是打印类的内容到屏幕上 class APIError(): def ...

  6. Spring(十二)使用Spring的xml文件配置方式实现AOP

    配置文件与注解方式的有非常大不同,多了非常多配置项. beans2.xml <?xml version="1.0" encoding="UTF-8"? & ...

  7. MySQL C 客户端的内存泄漏问题

    我们的一个服务器软件在线上环境运行时出现了内存缓慢增长的问题. 用valgrind测试 MySQL的C客户端mysqlclient发现,它在正常的使用中会被valgrind报出存在内存泄漏. 1 正常 ...

  8. mysql数据库的数据类型及约束

     本文转自:http://www.cnblogs.com/zbseoag/archive/2013/03/19/2970004.html 1.整型 MySQL数据类型 含义(有符号) tinyint( ...

  9. IDEA创建maven项目jar更新缓慢问题

    转自:http://www.cnblogs.com/ae6623/p/4416256.html 国内连接maven官方的仓库更新依赖库,网速一般很慢,收集一些国内快速的maven仓库镜像以备用. 最新 ...

  10. Mustache模板引擎

    Mustache是一个Logic-Less模板引擎,即:零逻辑引擎,原因在于它只有标签,没有流程控制语句,这是它与其它模板引擎不同的地方. Mustache小巧玲珑,几乎用各种语言都实现了一遍. Mu ...