在上一个例子中,元素的类名使用拼接的方法,这样,类名中就不得不带有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. 谈谈node（1）

        node的出现,给了全栈工程师,一个绝佳的机会.   node给我们带来的是更低的硬件成本来完成更高需求以及用户体验感,一台8G内存服务器如果用传统架构,那么最多可驱使4000台同时访问,如果 ...

  2. Nhibernate Criteria 多个or条件查询

    sql: select * from table t where (t.name like '%张三%' or t.schoolName like '%张三%' or t.cityname like ...

  3. 类的专有方法(__len__)

    # -*- coding: utf-8 -*- #python 27 #xiaodeng #http://www.imooc.com/code/6252 #类的专有方法(__len__) #如果一个类 ...

  4. Tomcat servers.xml 无注释版

    <?xml version='1.0' encoding='utf-8'?> <Server port="8005" shutdown="SHUTDOW ...

  5. Linux 系统使用 iso 镜像文件或光盘配置本地YUM 源的最简单方式

    1.分配光驱 选择本地的iso系统镜像文件,或者在光驱中放入系统安装盘.之后,在桌面可以看到RHEL-7.2-Server的光盘图标. 2.查看光驱挂载的位置 使用df -h 命令可以看到光驱或镜像文 ...

  6. java 和 C 代码运行效率的比较（整理）

    最近和朋友无意间讨论起了 有关java 和C 的 效率问题, (我是java 推介者, 他是 c 语言推介者, 他做的是嵌入式) 故,想通过网络查询一下, 总结一下,两者到底效率如何,其有何差异,原因 ...

  7. C#：确保绑定到同一数据源的多个控件保持同步

    下面的代码示例演示如何使用 BindingSource 组件,将三个控件(两个文本框控件和一个 DataGridView 控件)绑定到 DataSet 中的同一列.该示例演示如何处理BindingCo ...

  8. vs.net使用技巧

    1.快捷键收缩和展开代码段 i. Ctrl-M-O   折叠所有方法 ii. Ctrl-M-P   展开所有方法并停止大纲显示(不可以再折叠了) iii. Ctrl-M-M   折叠或展开当前方法 i ...

  9. function声明的深刻含义和jquery属性注入区别

    在js中有两类对象 1.json对象,仅仅代表对象而已 2.function声明的对象 (1) 它定义了构造器  可以用new 对象 来初始化 数据对象 (2) 它指明对象是一个函数对象  通过后面加 ...

  10. jQuery瀑布流无限拖三大利器：masonry+imagesloaded+infinitescroll

    瀑布流已经是几乎过时的技术了,不过对于很多想要快速实现它的朋友而言,却绝非易事,因为即使我们已经有很多现成的代码,却发现在自己的开发环境中无法快速得到自己想要的结果.就像我们现在要介绍的三大利器(ma ...