在上一个例子中,元素的类名使用拼接的方法,这样,类名中就不得不带有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. Nginx负载均衡简易方法

    做个简单的测试,一个Nginx, 通过FastCGI协议和另外两台服务器上的基于CppCMS开发的web server通信.配置方法很简单: 首先,必须在nginx.conf文件开头,server 配 ...

  2. 亲自己主动手从源代码 构建 Groovy 2.3.8 公布包

    今天为了学习 怎样使用 Groovy 写 Groovy 的測试代码, 所以到 http://groovy.codehaus.org/Download 下载了 Groovy 2.3.8 的源码包. Gr ...

  3. MySQL user表简介

    mysql> DESC MYSQL.USER \G *************************** . row ***************************   Field:  ...

  4. 关于SimHash去重原理的理解（能力工场小马哥）

    阅读目录 1. SimHash与传统hash函数的区别 2. SimHash算法思想 3. SimHash流程实现 4. SimHash签名距离计算 5. SimHash存储和索引 6. SimHas ...

  5. eclipse git提交代码

    1.安装git 2.安装好后,进行,一个简单配置,填入我们的用户名和邮箱 >>Preferences>Team>Git>Configuration 设置自定义仓库 3.登 ...

  6. 【转】Html.RenderPartial与 Html.RenderAction的区别

    Html.RenderPartial与Html.RenderAction 这个两个方法都是用于把MVC用户控件嵌入到View中. Html.RenderPartial是直接将MVC用户控件嵌入到界面上 ...

  7. 【BIEE】清除缓存

    清除缓存步骤: 1.管理→管理会话→关闭所有游标 2.管理→发出SQL语句:CALL SAPURGEALLCACHE(); 点击发送SQL语句后

  8. 解决python：'ascii' codec can't encode characters in position问题

    今天把一个列表转换成字符串输出的时候出现了UnicodeEncodeError: 'ascii' codec can't encode characters in position 32-34: or ...

  9. Intellij IDEA 快捷键整理（dyCopy）

    原文:http://www.cnblogs.com/tonycody/p/3257601.html   [常规] Ctrl+Shift + Enter,语句完成 “!”,否定完成,输入表达式时按 “! ...

  10. LR杂记 - 性能測试指标及经常使用的监控工具

    监控指标 性能測试通常须要监控的指标包含: 1.serverLinux(包含CPU.Memory.Load.I/O). 2.数据库:1.Mysql 2.Oracle(缓存命中.索引.单条SQL性能.数 ...