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',[]) ...
随机推荐
- vs2012打开低版本项目时 出现vs2012警告未能加载包“visual c++ package 解决办法
vs2012 打开 vs2010 项目时 提示的 错误信息. 解决办法 是下载一个 vs2012的 一个补丁包 http://www.microsoft.com/en-us/download/deta ...
- HashMap源码分析jdk1.6
HashMap数组每个元素的初始值为NULL 1.定义 public interface Map<K,V> { int size(); boolean isEmpty(); boolea ...
- iOS--app自定义相册--创建相簿，存储图片到手机
我们在APP中点击照片,都会显示出大图,然后在大图的上面会有个保存照片的按钮,照片直接保存到了系统的相册中,但是因为公司产品的需要,让你创建和APP同名的相册保存在里面,那么就对了,可以看下具体的代码 ...
- SparkStreaming 编程指南
摘要:学习SparkStreaming从官网的编程指南开始,由于Python编码修改方便不用打包,这里只整理python代码! 一.概述 Spark Streaming 是 Spark Core AP ...
- C++之Effective STL学习笔记Item21
好了,先贴一段英文,真心不想翻译过来,而且感觉也翻译不到那么到位: The STL is awash in comparisons of objects to see if they have the ...
- BZOJ 4816 [Sdoi2017]数字表格 ——莫比乌斯反演
大力反演出奇迹. 然后xjb维护. 毕竟T1 #include <map> #include <ctime> #include <cmath> #include & ...
- Editplus注册码，汉化官方版本
官方认证Edit+简体中文版 https://www.editplus.com/download.html EditPlus注册码在线生成 http://www.jb51.net/tools/edit ...
- P3285 松鼠的新家 (树链剖分)
题目描述 松鼠的新家是一棵树,前几天刚刚装修了新家,新家有n个房间,并且有n-1根树枝连接,每个房间都可以相互到达,且俩个房间之间的路线都是唯一的.天哪,他居然真的住在”树“上. 松鼠想邀请小熊维尼前 ...
- bzoj 4295 [PA2015]Hazard 贪心，暴力
[PA2015]Hazard Time Limit: 10 Sec Memory Limit: 512 MBSubmit: 69 Solved: 19[Submit][Status][Discus ...
- eval()函数的巧用
eval的功能 将字符串str当成有效的表达式来执行.. 写函数,专门计算图形的面积 其中嵌套函数,计算圆的面积,正方形的面积和长方形的面积 调用函数area(‘圆形’,圆半径) 返回圆的面积 调用 ...