--@angularJS--浅谈class与Ng-Class的应用
1、angularjs的表达式是可以写在class里面动态改变其值的，写法如下：
□、CSS1.html:
<!doctype html>
<html ng-app="MyCSSModule">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="CSS1.css">
</head>
<body>
<div ng-controller="CSSCtrl">
<p class="text-{{color}}">测试CSS样式</p> //注意这里的class="text-{{color}}"这个class写法，text-后面的angular表达式变量
<button class="btn btn-default" ng-click="setGreen()">绿色</button>
</div>
</body>
<script src="js/angular-1.3.0.js"></script>
<script src="CSS1.js"></script>
</html>
□、CSS1.css:
.text-red {
background-color: #ff0000;
}
.text-green {
background-color: #00ff00;
}
□、CSS1.js:
var myCSSModule = angular.module('MyCSSModule', []);
myCSSModule.controller('CSSCtrl', ['$scope',
function($scope) {
$scope.color = "red";
$scope.setGreen = function() { //定义一个setGreen()方法，点击调用这个方法改变color的值，平谈无奇就这么简单
$scope.color = "green";
}
}
]);
2、上面的例子改造一下，用ng-class，写法如下：
□、NgClass.html:
<!doctype html>
<html ng-app="MyCSSModule">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="NgClass.css">
</head>
<body>
<div ng-controller='HeaderController'>
<div ng-class='{error: isError, warning: isWarning}'>{{messageText}}</div> //注意ng-class='{error: isError, warning: isWarning}'的写法，后面的表达式意为：
当isError为true时,调用error样式类，当isWarning为true时,调用warning样式类
<button ng-click='showError()'>Simulate Error</button>
<button ng-click='showWarning()'>Simulate Warning</button>
</div>
</body>
<script src="js/angular-1.3.0.js"></script>
<script src="NgClass.js"></script>
</html>
□、NgClass.css:
.error {
background-color: red;
}
.warning {
background-color: yellow;
}
□、NgClass.js:
var myCSSModule = angular.module('MyCSSModule', []);
myCSSModule.controller('HeaderController', ['$scope',
function($scope) {
$scope.isError = false;
$scope.isWarning = false; //两个标记变量默认状态下都为false
$scope.showError = function() { //控制器里面做的事就是给变量赋值，通过html中的ng-click来调用赋值的方法
$scope.messageText = 'This is an error!';
$scope.isError = true;
$scope.isWarning = false;
};
$scope.showWarning = function() {
$scope.messageText = 'Just a warning. Please carry on.';
$scope.isWarning = true;
$scope.isError = false;
};
}
])
--@angularJS--浅谈class与Ng-Class的应用的更多相关文章
- 关于AngularJS学习整理---浅谈$scope(作用域) 新手必备！
作为初次接触 AngularJS的新手,想要深层理解里面的内容短时间还是不可能的,所以标题写了浅谈字样,以下内容是参考各位大神以及相关书籍整理加个人理解,出现错误的地方请大家指正. $scope(作用 ...
- AngularJS进阶(二十五)requirejs + angular + angular-route 浅谈HTML5单页面架构
requirejs + angular + angular-route 浅谈HTML5单页面架构 众所周知,现在移动Webapp越来越多,例如天猫.京东.国美这些都是很好的例子.而在Webapp中,又 ...
- 浅谈Hybrid技术的设计与实现第二弹
前言 浅谈Hybrid技术的设计与实现 浅谈Hybrid技术的设计与实现第二弹 浅谈Hybrid技术的设计与实现第三弹——落地篇 接上文:浅谈Hybrid技术的设计与实现(阅读本文前,建议阅读这个先) ...
- 浅谈Vue.js
作为一名Vue.js的忠实用户,我想有必要写点文章来歌颂这一门美好的语言了,我给它的总体评价是“简单却不失优雅,小巧而不乏大匠”,下面将围绕这句话给大家介绍Vue.js,希望能够激发你对Vue.js的 ...
- 浅谈HTML5单页面架构（一）——requirejs + angular + angular-route
心血来潮,打算结合实际开发的经验,浅谈一下HTML5单页面App或网页的架构. 众所周知,现在移动Webapp越来越多,例如天猫.京东.国美这些都是很好的例子.而在Webapp中,又要数单页面架构体验 ...
- 浅谈Feature Scaling
浅谈Feature Scaling 定义:Feature scaling is a method used to standardize the range of independent variab ...
- 【微信小程序项目实践总结】30分钟从陌生到熟悉 web app 、native app、hybrid app比较 30分钟ES6从陌生到熟悉 【原创】浅谈内存泄露 HTML5 五子棋 - JS/Canvas 游戏 meta 详解，html5 meta 标签日常设置 C#中回滚TransactionScope的使用方法和原理
[微信小程序项目实践总结]30分钟从陌生到熟悉 前言 我们之前对小程序做了基本学习: 1. 微信小程序开发07-列表页面怎么做 2. 微信小程序开发06-一个业务页面的完成 3. 微信小程序开发05- ...
- 浅谈 Fragment 生命周期
版权声明:本文为博主原创文章,未经博主允许不得转载. 微博:厉圣杰 源码:AndroidDemo/Fragment 文中如有纰漏,欢迎大家留言指出. Fragment 是在 Android 3.0 中 ...
- 浅谈 LayoutInflater
浅谈 LayoutInflater 版权声明:本文为博主原创文章,未经博主允许不得转载. 微博:厉圣杰 源码:AndroidDemo/View 文中如有纰漏,欢迎大家留言指出. 在 Android 的 ...
- 浅谈Java的throw与throws
转载:http://blog.csdn.net/luoweifu/article/details/10721543 我进行了一些加工,不是本人原创但比原博主要更完善~ 浅谈Java异常 以前虽然知道一 ...
随机推荐
- App installation failed There was an internal API error.
工程名为汉字的时候,真机调试会出现这种问题.模拟器没有问题. 如图: 解决办法:
- JS读RSS
<html> <head> <title>javascript读取RSS数据</title> <META content="t ...
- JSON & XML 简析
转载自:http://my.oschina.net/aofe/blog/269260 JSON: XML: JSON格式说明: HTML & XML 的对比 HTML: XML: HTML5新 ...
- （转）Vim的Python编辑器详细配置过程 (Based on Ubuntu 12.04 LTS)
为什么要用vim编辑py文件? 因为在Linux命令行中,缺少图形界面的IDE,vim是最佳的文本编辑器,而为了更好的编辑py文本,所以配置vim. 1. 安装完整版vim vi和vim的区别? 在L ...
- Web爬去的C#请求发送
public class HttpControler { //post请求发送 private Encoding m_Encoding = Encoding.GetEncoding("gb2 ...
- POJ 2296 Map Labeler
二分答案 + 2-SAT验证,判断正方形是否相交写起来有点烦,思路还是挺简单的. #include<cstdio> #include<cstring> #include< ...
- 你的float用对了吗
介绍 很多人都知道float是浮点类型,它不能表示数据范围内的所有数值.但是,实际使用或编码时,你又是否记得这句话呢?下面是stackoverflow中的一个问题: why does a float ...
- HDU 5172 GTY's gay friends 线段树
GTY's gay friends Time Limit: 6000/3000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others ...
- JQuery常用动画实现函数
1.上拉.下拉和切换 slideup().slidedown().slideToggle() JQuery里面的切换太吊了,它自带判断当前显示状态,如果为显示就执行隐藏,如果为隐藏就执行显示. 2.淡 ...
- Laravel Auth验证
laravel自带了auth类和User模型来帮助我们很方便的实现用户登陆.判断. 首先,先配置一下相关参数 app/config/auth.php: model 指定模型 table 指定用户表 p ...