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',[]) ...
随机推荐
- iOS关于Xcode上的Other linker flags
Targets选项下有Other linker flags的设置,用来填写XCode的链接器参数,如:-ObjC -all_load -force_load等.还记得我们在学习C程序的时候,从C代码到 ...
- [git 学习篇]删除文件
1 现在本地文件管理器删除了readme.txt(这个readme.txt已经在创库存在的) rm -rf readme.txt 2 此时git status查看 $ git status # On ...
- 2017"百度之星"程序设计大赛 - 复赛
Arithmetic of Bomb Accepts: 1050 Submissions: 1762 Time Limit: 2000/1000 MS (Java/Others) Memory ...
- DS博客作业05——树
1.本周学习总结 1.1思维导图 1.2学习体会 学习:相比于之前的数据结构,树多了很多性质,相应的也多了很多计算题,不得不说,专有名词也是颇多.觉得树最独特的地方就是它的兄弟.孩子结点,用以组成了它 ...
- 【bzoj2111】[ZJOI2010]Perm 排列计数 dp+Lucas定理
题目描述 称一个1,2,...,N的排列P1,P2...,Pn是Mogic的,当且仅当2<=i<=N时,Pi>Pi/2. 计算1,2,...N的排列中有多少是Mogic的,答案可能很 ...
- hihoCoder #1157 建造金字塔
这道题我想了一天才想清楚做法.AC 了之后去看别人写的题解,都是三言两语意识流式描述,我并不能读懂.我觉得很自卑,为何人家解这道题如此轻松.不过,我还是决定把我的解法写下来,并且一定要写清楚. 思路 ...
- PHP分页类(较完美)
<?php /** file: page.class.php 完美分页类 Page */ class Page { private $total; //数据表中总记录数 private $lis ...
- Pushlets的初始化陷阱
Pushlets是在类名为Pushlet的servlet的init方法中进行初始化的.一般我们会在web.xml配置pushlet的时候,指定其servlet在Web应用启动时就进行初始化,即便这样, ...
- 【CF676D】Theseus and labyrinth（BFS，最短路）
题意:给定一张N*M的地图,每一格都是一个房间,房间之间有门.每个房间可能有四个门,例如>代表右边只有一个门在右边即只能向右走,L代表左边没有门只能除了左其他都可以走等等.现在给出起点和终点,每 ...
- 如何在requirejs下引用bootstrap
原本以为只要require过来就能用 require(['jquery','underscore','bootstrap','cache'],function($,U,B,C){ 但发现会报错,类似未 ...