<style>
.error{background-color: red;}
.warning{background-color: yellow;}
</style>

<script>

　　

app.controller("headerController",function($scope){
$scope.isError=false;
$scope.isWarning=false;
$scope.showError=function(){

$scope.messageText="this is an error";
$scope.isError=true;
$scope.isWarning=false;
}
$scope.showWarning=function(){
$scope.messageText="just a warning";
$scope.isError=false;
$scope.isWarning=true;
}
});

<script>

<body>

<div ng-controller="headerController">
<div ng-class='{error:isError,warning:isWarning}'>{{messageText}}</div>
<button ng-click="showError()">error</button>
<button ng-click="showWarning()">warning</button>
</div>
</body>

ng-class css样式的更多相关文章

  1. css样式让input垂直居中

    css样式让input垂直居中 css代码: .div1{ border: 1px solid #CCC; width:1120px; height:40px; margin:auto; displa ...

  2. 深度理解CSS样式表，内有彩蛋....

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. js设置css样式.

    在js设置css样式做法 var obj = document.getElementById('div'); obj.style.width = '100px'; obj.style.height = ...

  4. CSS样式表

    CSS样式及属性 样式标的基本概念 样式表的分类 1.内联样式表 和html联合显示,控制精确,但可重用性差,冗余多. 例:<p style="font-size:14px;" ...

  5. 脚本工具（获取某个文件夹下的所有图片属性批量生成css样式）

    问题描述: 由于有一次工作原因,就是将某个文件夹下的所有图片,通过CSS描述他们的属性,用的时候就可以直接引用.但是我觉得那个文件夹下的图片太多,而且CSS文件的格式又有一定的规律,所有想通过脚本来生 ...

  6. jQuery所支持的css样式

    jQuery所支持的css样式 backgroundPosition borderWidth borderBottomWidth borderLeftWidth borderRightWidth bo ...

  7. Yii2 assets注册的css样式文件没有加载

    准备引入layui.css文件的,在LayuiAssets类中已经配置了资源属性 <?php namespace frontend\assets; use yii\web\AssetBundle ...

  8. 获取元素计算后的css样式封装

    获取元素计算后的css样式封装: function getCss(obj,attribute) { if(obj.currentStyle) { return obj.currentStyle[att ...

  9. JS实战 · 仿css样式选择器

    代码如下: <html> <head>     <meta http-equiv="Content-Type" content="text/ ...

  10. CSS样式之优先级

    说到到css的样式优先级,今天偶再来回顾下,从css的样式优先级可分为两个部分: 1.从CSS代码放置的位置看权重优先级:     内联样式 > 内部嵌入样式 >外联样式 2.从样式选择器 ...

随机推荐

  1. 又是一道水题 hdu背包

    Problem Description 电子科大本部食堂的饭卡有一种很诡异的设计,即在购买之前判断余额.如果购买一个商品之前,卡上的剩余金额大于或等于5元,就一定可以购买成功(即使购买后卡上余额为负) ...

  2. Windows版本搭建安装React Native环境配置及相关问题

    此文档整理参考地址: http://www.lcode.org/%E5%8F%B2%E4%B8%8A%E6%9C%80%E8%AF%A6%E7%BB%86windows%E7%89%88%E6%9C% ...

  3. The Six Types of Rails Association

    翻译整理自:http://guides.rubyonrails.org/v3.2.13/association_basics.html 想吐槽一句,http://guides.ruby-china.o ...

  4. bootstrapUI

    http://www.tinygroup.org/tinyadmin/#ajax/dashboard.pagelet

  5. TOJ 2732存钱计划（三）（单源最短路）

    存钱计划(三)   时间限制(普通/Java):1000MS/30000MS     运行内存限制:65536KByte 总提交: 18            测试通过: 16 描述 TZC的店铺比较 ...

  6. Marquee滚动字幕设置(转)

    <marquee >滚动文字 </marquee> 方向 <direction=#> #=left, right,up,down 方式<bihavior=#& ...

  7. android 04 AbsoluteLayout

    绝对布局:layout_x,layout_y:坐标精准定位 xml文件:不推荐使用 <AbsoluteLayout xmlns:android="http://schemas.andr ...

  8. GDB技巧整理

    https://blog.atime.me/note/gdb-tricks.html 整理常用的gdb技巧. 常用命令 常用的gdb命令... 启动gdb 直接运行 gdb --args prog a ...

  9. windows使用python调用wget批处理下载数据

    wget是linux/unix下通常使用的下载http/ftp的数据,使用非常方便,其实wget目前经过编译,也可在windows下使用.最近需要下载大量的遥感数据,使用了python写了批处理下载程 ...

  10. 偶遇问题 - - JavaScript 取消链接默认行为问题

    今天在测试<JavaScript DOM编程艺术(第2版)>中第69页代码时,遇到了问题.本来预期效果应该是点击链接后不跳转当前页面,而是另外弹出有个窗口.但结果却是页面跳转了.代码如下图 ...