在上一个例子中,元素的类名使用拼接的方法,这样,类名中就不得不带有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. uva 10670 Work Reduction(贪心）

    题目连接:10670 - Work Reduction 题目大意:有tol的工作量,和要求达到的工作剩余量sur,然后是公司总数,对应每个公司提供两种服务,1.完成一个工作量,2.完成当前未完成工作量 ...

  2. Java从零开始学十七(简单工厂)

    简单工厂的实现 实现一个计算器:要求输入2个数,和运算符,得到结果 Operation类 package com.pb.demo1; public class Operation { private ...

  3. JDBC一(web基础学习笔记七)

    一.JDBC Java数据库的连接技术(Java DataBase Connectivity),能实现Java程序以各种数据库的访问 由一组使用Java语言编写的类和接口(JDBC API)组成,它j ...

  4. 4、Android Activity的生命周期 Activity的生命周期

    watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveXV4aWt1b18x/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA ...

  5. webpack配置上线地址

    webpack配置上线地址主要使用output配置项下的publicPath. webpack.config.js配置文件为: var htmlWebpackPlugin = require('htm ...

  6. gulp 常用插件汇总

    2017-07-26更新:图片压缩插件使用gulp-smushit,gulp-smushit压缩率比较大,gulp-imagemin 图片压缩插件压缩率不明显. 见下图压缩率: 1.gulp安装 参照 ...

  7. 解决Mysql中文乱码问题的方案

    MySQL会出现中文乱码的原因不外乎下列几点: 1.server本身设定问题,例如还停留在latin12.table的语系设定问题(包含character与collation)3.客户端程式(例如ph ...

  8. top(topas),vmstat,iostat在linux和AIX操作系统下显示情况

    top(topas),vmstat,iostat在linux和AIX操作系统下显示情况 分类: Linux基础 2013-08-09 17:26 1093人阅读 评论(0) 收藏 举报 详细列出各命令 ...

  9. grep -A -B -C

    Linux中grep/egrep查找命令 grep --color    ###颜色着重显示命中的文件及文件件 -n  ###显示行号  number -i   ###忽略大小写 ignore -c ...

  10. WebView和JavaScript如何实现相互调用

    WebView可以同JavaScript互相调用,因此我们可以用HTML和JavaScript来辅助编写Android应用. 示例:使用javaScript获取Android程序中的对象数据 clas ...