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',[]) ...
随机推荐
- SpringCloudLearning
http://blog.didispace.com/Spring-Boot%E5%9F%BA%E7%A1%80%E6%95%99%E7%A8%8B/ https://github.com/forezp ...
- 命令行下修改postgres密码
1. 修改PostgreSQL数据库默认用户postgres的密码 PostgreSQL数据库创建一个postgres用户作为数据库的管理员,密码随机,所以需要修改密码,方式如下: 步骤一:登录Pos ...
- 解压文件夹python
# _*_ coding: utf-8 _*_ import zipfile import shutil import os print os.getcwd() basedir = os.path.d ...
- C语言知识点(4)
一.while. dowhile. 1.while while (表达式) { 语句: … 语句: } 2.while do { printf(“%d/n,I);…}while (i<=1 ...
- Map容器——HashMap及常用API,及put,get方法解析,哈希码的产生和使用
Map接口 ① 映射(map)是一个存储键/值对的对象.给定一个键,可以查询到它的值,键和值都是对象; ② 键必须是唯一的,值可以重复; ③ 有些映射可以接收null键和null值,而有的 ...
- poj1236 Tarjan算法模板 详解
思想: 做一遍DFS,用dfn[i]表示编号为i的节点在DFS过程中的访问序号(也可以叫做开始时间)用low[i]表示i节点DFS过程中i的下方节点所能到达的开始时间最早的节点的开始时间.初始时dfn ...
- 【Luogu】P3174毛毛虫(树形DP)
题目链接 树形DP水题,设f[x][0]是以x为根的子树,内部只有半条链(就是链的两个端点一个在子树里,一个不在子树里)的最大值,f[x][1]是以x为根的子树,内部有一条完整的链(选两个内部的子树作 ...
- js使用笔记
js使用技巧总结 1,onclick有效是结合alter弹出框 <!DOCTYPE html> <html> <head lang="en"> ...
- Unity 过度光照贴图
背景:开关窗帘过程,让环境在亮和暗之间过度 事先烘培出亮.暗两张Lighting map.然后代码实现,窗帘开关由动作实现,而代码中通过动作执行进度来过度两张Lighting map void OnA ...
- JavaWeb学习总结(十二)——Session(转)
一.Session简单介绍 在WEB开发中,服务器可以为每个用户浏览器创建一个会话对象(session对象),注意:一个浏览器独占一个session对象(默认情况下).因此,在需要保存用户数据时,服务 ...