例子:

 .error{background-color:red;}

 .warning{background-color:yellow;}
 <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> function HeaderController($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= 'this is an warning!';
$scope.isError=false;
$scope.isWarning=true;
};
}

Angularjs快速入门(四)-css类和样式的更多相关文章

  1. AngularJS快速入门指南16:Bootstrap

    thead>tr>th, table.reference>tbody>tr>th, table.reference>tfoot>tr>th, table ...

  2. AngularJS快速入门指南04:指令

    AngularJS通过指令将HTML属性进行了扩展. AngularJS指令 AngularJS指令是带有ng-前缀的扩展HTML属性. ng-app指令用来初始化AngularJS applicat ...

  3. AngularJS快速入门指南19:示例代码

    本文给出的大部分示例都可以直接运行,通过点击运行按钮来查看结果,同时支持在线编辑代码. <div ng-app=""> <p>Name: <input ...

  4. AngularJS快速入门指南08:表格

    ng-repeat指令非常适合用来显示表格. 在表格中显示数据 在AngularJS中显示表格非常容易: <div ng-app="myApp" ng-controller= ...

  5. AngularJS快速入门指南17:Includes

    使用AngularJS,你可以在HTML中包含其它的HTML文件. 在HTML中包含其它HTML文件? 当前的HTML文档还不支持该功能.不过W3C建议在后续的HTML版本中增加HTML import ...

  6. AngularJS快速入门指南09:SQL

    我们可以将之前章节中的代码用来从数据库中读取数据. 通过PHP Server从MySQL数据库中获取数据 <div ng-app="myApp" ng-controller= ...

  7. AngularJS快速入门指南01:导言

    AngularJS使用新的attributes扩展了HTML AngularJS对单页面应用的支持非常好(SPAs) AngularJS非常容易学习 现在就开始学习AngularJS吧! 关于本指南 ...

  8. AngularJS快速入门指南20:快速参考

    thead>tr>th, table.reference>tbody>tr>th, table.reference>tfoot>tr>th, table ...

  9. AngularJS快速入门指南18:Application

    是时候创建一个真正的AngularJS单页面应用程序了(SPA). 一个AngularJS应用程序示例 你已经了解了足够多的内容来创建第一个AngularJS应用程序: My Note Save Cl ...

  10. AngularJS快速入门指南15:API

    thead>tr>th, table.reference>tbody>tr>th, table.reference>tfoot>tr>th, table ...

随机推荐

  1. eclipse一直报An internal error occurred during: "Building workspace". GC overhead limit exceeded

    最近导入到eclipse里的工程挺大的,每次eclipse启动之后都回update workspace,然后就一直报: An internal error occurred during: " ...

  2. docker工作流程

    Docker提供一种方法在容器中运行安全隔离的应用程序,应用程序与所有依赖项和库一起打包在容器中.因为你的应用程序总是可以使用它在构建镜像中期望的环境运行,测试和部署比以往任何时候都更简单,因为你的构 ...

  3. yii中调整ActiveForm表单样式

    Yii2中对于表单和字段的支持组件为ActiveForm和ActiveField, <?php $form = ActiveForm::begin([ 'id' => 'login-for ...

  4. Swift应用案例 2.闭包入门到精通

      本文主要介绍Swift的闭包的使用并与OC的Block做比较.学习Swift是绕不过闭包的,因为无论是全局函数还是嵌套函数都是闭包的一种,本文主要介绍闭包表达式. 1.闭包表达式的使用 // 1. ...

  5. 《连载 | 物联网框架ServerSuperIO教程》- 17.支持实时数据库,高并发保存测点数据。附:3.4 发布与版本更新说明。

    1.C#跨平台物联网通讯框架ServerSuperIO(SSIO)介绍 <连载 | 物联网框架ServerSuperIO教程>1.4种通讯模式机制. <连载 | 物联网框架Serve ...

  6. 让Xcode日志输出中文

    有的时候xcode打印后台返回的日志,明明后台返回的是中文,但是在xcode的日志里面却不是中文,而是unicode编码,这个就比较坑,因为看不到内容. 其实解决办法有两种: 第一种就是给xcode安 ...

  7. java初学第二章

    这两天学习了基本的数据类型还有运算符. 分享一下学习过程还有写作~ 数据类型分为基本数据类型还有引用数据类型,基本数据类型有4类8种: 整型: byte,short,int,long 浮点型:floa ...

  8. Struts2之Validator

    Struts2中提供了数据校验验证数据例如验证邮件.数字等.验证方式有3种:一是通过validate()方法,二是通过Xml,三是使用注解方式. 一.初始化 首先定义一个User类 package c ...

  9. iOS面试必看经典试题分析

    > **不用临时变量怎么实现两个数据的交换?** 方式一:加减法的运算方式求解new_b = a - b + b = a;new_a = a + b - a = b;一个简单的运算方式,最重要的 ...

  10. Oracle函数整理

    ) from dual;--绝对值 ,) from dual;--取模,取余数 select ceil (12.1) from dual;--去上限值 select floor (12.1) from ...