[Angularjs]ng-class,ng-class-even,ng-class-odd
写在前面
最近在通过angularjs将数据绑定到前端，其中也涉及到很多新的东西，一些效果还是很有必要实现的。在使用中发现ng-class，ng-class-even、ng-class-odd的使用，对列表的操作非常方便，就在这里记录一下。
系列文章
[Angularjs]ng-select和ng-options
一个例子
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="myapp">
<head>
<title>class</title>
<script src="JS/angular.min.js"></script>
<script src="JS/angular-route.min.js"></script>
<script>
var app = angular.module('myapp', []);
app.controller('ColorController', function ($scope) {
$scope.users = [{ id: 1, name: 'wolfy', age: 20 }, { id: 2, name: 'wolfy2', age: 20 }, { id: 3, name: 'wolfy3', age: 20 }];
});
</script>
<style>
.main {
border: 1px solid #0094ff;
width: 100%;
} .list {
margin: 8px auto;
width: 90%;
text-align: center;
} .even {
background-color: lightgray;
} .odd {
background-color: lightgreen;
}
</style>
</head>
<body>
<div ng-class="'main'" ng-controller="ColorController">
<h2>示例一</h2>
<table ng-class="'list'" border="1" cellpadding="0" cellspacing="0">
<tr>
<th>ID</th>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr ng-repeat="user in users" ng-class-even="'even'" ng-class-odd="'odd'" >
<td>{{user.id}}</td>
<td>{{user.name}}</td>
<td>{{user.age}}</td>
</tr>
</table>
<h2>示例二</h2>
<table ng-class="'list'" border="1" cellpadding="0" cellspacing="0">
<tr>
<th>ID</th>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr ng-repeat="user in users" ng-class="($index+1)%2==0?'even':'odd'">
<td>{{user.id}}</td>
<td>{{user.name}}</td>
<td>{{user.age}}</td>
</tr>
</table>
</div>
</body>
</html>
总结
这里需要注意在使用ng-class,ng-class-even,ng-class-odd时，需为类样式加上单引号，不然不起作用。
[Angularjs]ng-class,ng-class-even,ng-class-odd的更多相关文章
- Flume NG Getting Started（Flume NG 新手入门指南）
Flume NG Getting Started(Flume NG 新手入门指南)翻译 新手入门 Flume NG是什么? 有什么改变? 获得Flume NG 从源码构建 配置 flume-ng全局选 ...
- Flume NG基本架构与Flume NG核心概念
导读 Flume NG是一个分布式.可靠.可用的系统,它能够将不同数据源的海量日志数据进行高效收集.聚合.移动,最后存储到一个中心化数据存储系统中. 由原来的Flume OG到现在的Flume NG, ...
- 必须正确理解的---ng指令中的compile与link函数解析
这个绝对是深入的知识,但看完之后,对NG的理解就很利害啦. http://www.ifeenan.com/angularjs/2014-09-04-%5B%E8%AF%91%5DNG%E6%8C%87 ...
- ng之自定义指令
最近开始研究并使用angular,今天就来简单讲讲对于ng中自定义指令的一下使用心得吧! 相信用过ng的人都对ng中的指令有所了解,指令,我将其理解为AngularJS操作HTML element的一 ...
- [译]ng指令中的compile与link函数解析 转
通常大家在使用ng中的指令的时候,用的链接函数最多的是link属性,下面这篇文章将告诉大家complie,pre-link,post-link的用法与区别. 原文地址 angularjs里的指令非常神 ...
- 高可用Hadoop平台－Flume NG实战图解篇
1.概述 今天补充一篇关于Flume的博客,前面在讲解高可用的Hadoop平台的时候遗漏了这篇,本篇博客为大家讲述以下内容: Flume NG简述 单点Flume NG搭建.运行 高可用Flume N ...
- angular 2 - 001 ng cli的安装和使用
angular cli 创建项目和组件 ng new my-app --skip-install cd my-app cnpm install ng serve localhost:4200 angu ...
- ng工程升级cli版本
全局更新ng 然后在工程里 ng update @angular/cli @angular/core
- ng 构建
1.ng 构建和部署 构建:编译和合并ng build 部署:复制dist里面的文件到服务器 2.多环境的支持 配置环境package.json "scripts": { &quo ...
- Angular CLI 启动 版本ng 4
npm install -g angular-cli ng -v ng new project_name cd project_name ng serve 浏览器打开输入 localhost:4200
随机推荐
- usb驱动开发2之代码地图
USB只是Linux庞大家族里的一个小部落,host controller是它们的族长,族里的每个USB设备都需要被系统识别.下图显示包含一个USB接口的USB鼠标导出的结果. USB系统中的第一个U ...
- C语言 百炼成钢8
//题目22:两个乒乓球队进行比赛,各出三人.甲队为a,b,c三人,乙队为x,y,z三人.已抽签决定 //比赛名单.有人向队员打听比赛的名单.a说他不和x比,c说他不和x, z比,请编程序找出 //三 ...
- normal.1
11 # coding:utf-8 def maxnum(ipstr): ipstr = ipstr.split(' ')[1] return ipstr def minnum(ipstr): ips ...
- 2015某编程网易语言vip课堂全套教程 包含post，hook入门到精通等
2015某编程网易语言vip课堂全套教程 包含post,hook入门到精通等 官方论坛弄来的 如果在官方下载需要权限的 挺不错教程 想学习易语言入门到精通 post hook js改写的可以看 ...
- spark能否取代Hadoop?
大数据的浪潮风靡全球的时候,Spark火了.在国外 Yahoo!.Twitter.Intel.Amazon.Cloudera 等公司率先应用并推广 Spark 技术,在国内阿里巴巴.百度.淘宝.腾讯. ...
- 江湖恩仇录之PHP程序CPU高占用优化经历分享
故事起因 本故事根据真实故事书写,如有雷同绝非巧合.在开发过程中难免反复修改程序,面对突然起来的问题难免束手无策,有些人选择自我处理问题,也有人选择交流区域咨询,或许恰巧有人有类似的问题,刚好可以解决 ...
- 百度地图 IOS版开发经验分享
最近刚完成app中地图的应用,感觉非常的曲折,折腾了很久,刚才开始一直不能成功使用百度地图api,报一大堆的错误,后来换到高德地图,又发现服务端使用的百度的经纬度,又从高德换回百度,泪奔. 这里简单比 ...
- Boostrap(3)
常用标签 1.文字 p标签(段落) small标签(让文字呈现灰色) em标签(文字斜体) blokcquote标签(文字内容为引用时用该标签) class=”pull-right"右浮动 ...
- JAVA 注解的几大作用及使用方法详解【转】
java 注解,从名字上看是注释,解释.但功能却不仅仅是注释那么简单.注解(Annotation) 为我们在代码中添加信息提供了一种形式化的方法,是我们可以在稍后 某个时刻方便地使用这些数据(通过 解 ...
- java编程
Java编程:五子棋游戏源代码 import java.awt.*; import java.awt.event.*; import java.applet.*; import javax.swing ...