在上一个例子中,元素的类名使用拼接的方法,这样,类名中就不得不带有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. 心电图html js控件

    https://github.com/joakimkemeny/jke.d3.ecg/tree/master/demo/js

  2. Web 前端攻防（2014版）-baidu ux前端研发部

    http://fex.baidu.com/articles/page2/ Web 前端攻防(2014版) zjcqoo | 20 Jun 2014 禁止一切外链资源 外链会产生站外请求,因此可以被利用 ...

  3. 解决win10鼠标晃动问题

    删除HKEY_CLASSES_ROOTDirectoryBackgroundshellexContextMenuHandlers 下面,除了new以外的文件夹 重启,Ok

  4. 关闭ubuntu终端的BELL声音

    在shell提示符下面操作时有时会用到Tab来自动补全,这个时候系统就会发出BELL的声音,听了让人挺烦的. 有个方法能解决:编辑 /etc/inputrc,找到#set bell-style non ...

  5. Java学习笔记五（多线程）

    1.介绍 线程可以使程序具有两条和两条以上的可运行的路径.尤其对多核CPU特别的重要. 2.创建线程 1.继承Thread类 一个类直接的继承Thread类的话,此类就具有了线程的能力,接下来仅仅须要 ...

  6. oracle 快速备份表数据

      oracle 快速备份表数据 CreateTime--2018年2月28日17:04:50 Author:Marydon UpdateTime--2017年1月20日11:45:07 1.1.9. ...

  7. eclipse Java代码折叠工具

      eclipse Java代码折叠工具 CreateTime--2018年5月17日15点09分 Author:Marydon 1.问题描述 eclipse自带的代码折叠工具,无法折叠try{}ca ...

  8. idea 修改编辑区字体样式、大小

      idea 修改编辑区字体样式.大小 CreateTime--2018年4月26日10:36:59 Author:Marydon 设置-->Editor-->Font-->修改Fo ...

  9. xml 及其语法

    先说一些关于框架,开发中的框架,主要是用反射技术来封装数据. 先指定规范写出xml,然后通过读写流技术封装好一些API用来映射xml文件,方便取得xml中的配置信息.取得xml内容就可以通过取得的内容 ...

  10. java Socket 获取本地主机ip

    package cn.itcast.net.p1.ip; import java.net.InetAddress;import java.net.UnknownHostException; publi ...