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',[]) ...
随机推荐
- loj2005 「SDOI2017」相关分析
鬼畜线段树--Orz Capella #include <iostream> #include <cstdio> using namespace std; int n, m, ...
- sqlserver常用知识点备忘录（持续更新）
背景 一个项目的开发,离不开数据库的相关操作,表/视图设计,存储过程,触发器等等数据库对象的操作是非常频繁的.有时候,我们会查找系统中类似的代码,然后复制/粘贴进行再进行相应的修改.本文的目的在于归纳 ...
- 转 关于oracle 分区表 表空间以及索引的总结
关于oracle的表空间,分区表,以及索引的总结关键字: oracle, 表空间, 分区表, 索引 上周第一次做数据库测试碰到了很多问题特此总结: 表空间: Oracle的UNDOTBS01.DBF文 ...
- hdu6035[dfs+思维] 2017多校1
/*hdu6035[dfs+思维] 2017多校1*/ //合并色块, 妙啊妙啊 #include<bits/stdc++.h> using namespace std; ; const ...
- 学习orm框架及一些看法
首先说说我对现在主流的ORM框架的一些看法: 优点: 让程序员不再关注数据库细节,专心在业务逻辑上,程序员可以不懂数据库就可以开发系统. 让数据库迁移变的非常方便,如果系统需要更改使用的数据库,直接改 ...
- java面试题之Thread和Runnable是什么关系？
Thread实现了Runnable接口,使得run方法支持多线程: 因类的单一继承原则,推荐多实用Runnable接口
- bzoj 2791 [Poi2012]Rendezvous 基环森林
题目大意 给定一个n个顶点的有向图,每个顶点有且仅有一条出边. 对于顶点i,记它的出边为(i, a[i]). 再给出q组询问,每组询问由两个顶点a.b组成,要求输出满足下面条件的x.y: 从顶点a沿着 ...
- poj 1410 Intersection 线段相交
题目链接 题意 判断线段和矩形是否有交点(矩形的范围是四条边及内部). 思路 判断线段和矩形的四条边有无交点 && 线段是否在矩形内. 注意第二个条件. Code #include & ...
- CentOS找不到想要的镜像版本？
CentOS找不到想要的镜像版本? 情景: 当学习Linux时,一般教程不是最新的,教程里的CentOS版本也就不是最新的,这个时候, 在看着教程练习的时候就需要安装指定的版本,避免因为版本不同造成困 ...
- mysql利用sql脚本插入数据中文乱码
将其中的 /*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;/*!40101 SET @OLD_CHARACTER_SE ...