AngularJS的ng-class示例
程序下载：https://files.cnblogs.com/files/xiandedanteng/angularJSRender.rar
代码：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html ng-app="notesApp">
<head>
<title> New Document </title>
<style>
.odd{
background-color:blue;
width:300px;
}
.even{
background-color:pink;
width:300px;
}
</style>
<meta charset="utf-8">
<script src="angular1.4.6.min.js"></script>
</head>
<body ng-controller="MainCtrl as ctrl">
<div ng-repeat="member in ctrl.members" ng-class="ctrl.getBackground(member.gender)">
{{member.id}}.name={{member.name}},age={{member.age}}
<div>
</body>
</html>
<script type="text/javascript">
<!--
angular.module('notesApp',[])
.controller('MainCtrl',[function(){
var self=this;
self.members=[
{id:1,name:'andy',age:20,gender:'male'},
{id:2,name:'bill',age:21,gender:'female'},
{id:3,name:'cindy',age:22,gender:'female'},
{id:4,name:'douglas',age:23,gender:'female'},
{id:5,name:'einstein',age:24,gender:'male'},
];
self.getBackground=function(gender){
if(gender=='male'){
return 'odd';
}else{
return 'even';
}
};
}]);
//-->
</script>
效果：
要点：
ng-class指令用于选择性从html元素中添加或者删除css class
AngularJS的ng-class示例的更多相关文章
- 走进AngularJs(二) ng模板中常用指令的使用方式
通过使用模板,我们可以把model和controller中的数据组装起来呈现给浏览器,还可以通过数据绑定,实时更新视图,让我们的页面变成动态的.ng的模板真是让我爱不释手.学习ng道路还很漫长,从模板 ...
- 走进AngularJs(八) ng的路由机制
在谈路由机制前有必要先提一下现在比较流行的单页面应用,就是所谓的single page APP.为了实现无刷新的视图切换,我们通常会用ajax请求从后台取数据,然后套上HTML模板渲染在页面上,然而a ...
- AngularJS - 路由 routing 基础示例
AngularJS 路由 routing 能够从页面的一个视图跳转到另外一个视图,对单页面应用来讲是至关重要的.当应用变得越来越复杂时,我们需要一个合理的方式来管理用户在使用过程中看到的界面.Angu ...
- AngularJS中的控制器示例_3
<!doctype html> <html ng-app="myApp"> <head> <script src="C:\\Us ...
- AngularJS中的控制器示例_2
<!doctype html> <html ng-app="myApp"> <head> <script src="C:\\Us ...
- AngularJS中的控制器示例
<!doctype html> <html ng-app="myApp"> <head> <script src="C:\\Us ...
- AngularJS的Foreach循环示例
代码下载:https://files.cnblogs.com/files/xiandedanteng/angularJSForeach.rar 代码: <!DOCTYPE HTML PUBLIC ...
- AngularJS入门 & 分页 & CRUD示例
一.AngularJS 简介 AngularJS 诞生于2009年,由Misko Hevery 等人创建,后为Google所收购.是一款优秀的前端JS框架,已经被用于Google的多款产品当中. ...
- SpringMVC+Spring+Mybatis+AngularJS 多规格保存示例代码
insert时拿到最新增加的id值 绑定参数 js 实体类 Service实现类 Controller
- Angularjs promise对象解析
1.先来看一段Demo,看完这个demo你可以思考下如果使用$.ajax如何处理同样的逻辑,使用ng的promise有何优势? var ngApp=angular.module('ngApp',[]) ...
随机推荐
- 在win2003下apache2.2无法加载php5apache2_4.dll
昨天在一台win2003的服务器上配置apache和PHP, 我在apache的配置文件httpd.conf里添加 LoadModule php5_module "D:/php-5.4.23 ...
- Policy-Based Reinforcement Learning
Policy-based Approach policy-based 强化学习通常是要学习一个actor, actor可以用\(\pi_\theta (S)\) 来确定.如果我们用actor来玩游戏, ...
- Django中间件、Auth认证
中间件 一:什么是中间件 是介于request与response处理之间的一道处理过程 二:中间件的作用 如果你想修改请求,例如被传送到view中的HttpRequest对象. 或者你想修改view返 ...
- iOS学习笔记32-iCloud入门
一.iCloud云服务 iCloud是苹果提供的云端服务,用户可以将通讯录.备忘录.邮件.照片.音乐.视频等备份到云服务器并在各个苹果设备间直接进行共享而无需关心数据同步问题,甚至即使你的设备丢失后在 ...
- 刷题总结——Tree2cycle（hdu4714 树形dp）
题目: A tree with N nodes and N-1 edges is given. To connect or disconnect one edge, we need 1 unit of ...
- 北京集训TEST13——PA（第k小数）
题目: Description [问题描述] 从n个数中选若干(至少1)个数求和,求所有方案中第k小的和(和相同但取法不同的视为不同方案).[输入格式] 第一行输入2个正整数n,k. 第二 ...
- Windows上安装DB2——从IBM官网得到90天试用版
我在下面选的90天试用版: https://www.ibm.com/developerworks/cn/downloads/im/db2/ 进入下载页面,选择Windows https://www-0 ...
- python 面向对象与类的基本知识
一 什么是面向对象,面向对象与类的关系. 面向对象的程序设计是用来解决扩展性. 面向过程:根据业务逻辑从上到下写垒代码 函数式:将某功能代码封装到函数中,日后便无需重复编写,仅调用函数即可 面向对象 ...
- 开源 project
移动:http://www.csdn.net/article/2014-04-22/2819435-facebook-mobile-open-source-projects/1
- 从Java源码到Java字节码
Java最主流的源码编译器,javac,基本上不对代码做优化,只会做少量由Java语言规范要求或推荐的优化:也不做任何混淆,包括名字混淆或控制流混淆这些都不做.这使得javac生成的代码能很好的维持与 ...