AngularJS 基础ng-class-even指令用法


Posted in Javascript onAugust 01, 2016

AngularJS ng-class-even 指令

AngularJS 实例

为表格的偶数行设置 class="striped":

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<style>
.striped {
 color:white;
 background-color:black;
}
</style>
</head>
<body ng-app="myApp">

<table ng-controller="myCtrl">
<tr ng-repeat="x in records" ng-class-even="'striped'">
 <td>{{x.Name}}</td>
 <td>{{x.Country}}</td> 
</tr>
</table>

<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
 $scope.records = [
 {
  "Name" : "Alfreds Futterkiste",
  "Country" : "Germany"
 },
 {
  "Name" : "Berglunds snabbk",
  "Country" : "Sweden"
 },
 {
  "Name" : "Centro comercial Moctezuma",
  "Country" : "Mexico"
 },
 {
  "Name" : "Ernst Handel",
  "Country" : "Austria"
 }
 ]
});
</script>

</body>
</html>

运行结果:

 

Alfreds Futterkiste Germany
Berglunds snabbk Sweden
Centro comercial Moctezuma Mexico
Ernst Handel Austria

 定义和用法

ng-class-even 指令用于为 HTML 元素动态的绑定一个或多个 CSS 类,但只作用于偶数行。

ng-class-even 指令需要与 ng-repeat 指令搭配使用。

ng-class-even 指令建议用在表格的样式渲染中,但是所有HTML元素都是支持的。

语法

<element ng-class-even="expression"></element>

所有 HTML 元素都支持。

 参考值:

 

描述
expression 表达指定一个或多个 CSS 类。

 以上就是对AngularJS资料的整理,后续继续补充,谢谢大家的支持!

Javascript 相关文章推荐
发布BlueShow v1.0 图片浏览器(类似lightbox)blueshow.js 打包下载
Jul 21 Javascript
jQuery-ui引入后Vs2008的无智能提示问题解决方法
Feb 10 Javascript
高性能JavaScript模板引擎实现原理详解
Feb 05 Javascript
JS仿Windows开机启动Loading进度条的方法
Feb 26 Javascript
javascript实现链接单选效果的方法
May 13 Javascript
JavaScript的RequireJS库入门指南
Jul 01 Javascript
IE中document.createElement的iframe无法设置属性name的解决方法
Sep 14 Javascript
JS+CSS实现大气清新的滑动菜单效果代码
Oct 22 Javascript
JS实现双击屏幕滚动效果代码
Oct 28 Javascript
VueJS 集成 Medium Editor的示例代码 (自定义编辑器按钮)
Aug 24 Javascript
基于vue开发的在线付费课程应用过程
Jan 25 Javascript
element-ui 本地化使用教程详解
Oct 28 Javascript
jQuery EasyUI API 中文帮助文档和扩展实例
Aug 01 #Javascript
AngularJS入门教程之ng-class 指令用法
Aug 01 #Javascript
Three.js学习之正交投影照相机
Aug 01 #Javascript
jQuery简单实现iframe的高度根据页面内容自适应的方法
Aug 01 #Javascript
JQuery之proxy实现绑定代理方法
Aug 01 #Javascript
AngularJS入门教程之ng-checked 指令详解
Aug 01 #Javascript
浅谈JavaScript中面向对象的的深拷贝和浅拷贝
Aug 01 #Javascript
You might like
精通php的十大要点(上)
2009/02/04 PHP
PHP查询数据库中满足条件的记录条数(两种实现方法)
2013/01/29 PHP
php保存二进制原始数据为图片的程序代码
2014/10/14 PHP
yiic命令时提示“php.exe”不是内部或外部命令的解决方法
2014/12/18 PHP
php微信公众平台示例代码分析(二)
2016/12/06 PHP
PHP基于redis计数器类定义与用法示例
2018/02/08 PHP
php设计模式之职责链模式定义与用法经典示例
2019/09/19 PHP
ThinkPHP5.1+Ajax实现的无刷新分页功能示例
2020/02/10 PHP
用js自动判断浏览器分辨率的代码
2007/01/28 Javascript
ppk谈JavaScript style属性
2008/10/10 Javascript
ASP小贴士/ASP Tips javascript tips可以当桌面
2009/12/10 Javascript
javascript中字符串拼接需注意的问题
2010/07/13 Javascript
避免回车键导致的页面无意义刷新的解决方法
2011/04/12 Javascript
jQuery动画效果-fadeIn fadeOut淡入浅出示例代码
2013/08/28 Javascript
微信小程序 天气预报开发实例代码源码
2017/01/20 Javascript
从零开始做一个pagination分页组件
2017/03/15 Javascript
浅析node Async异步处理模块用例分析及常用方法介绍
2017/11/17 Javascript
javascript中new Array()和var arr=[]用法区别
2017/12/01 Javascript
js实现按钮开关单机下拉菜单效果
2018/11/22 Javascript
jQuery.parseJSON()函数详解
2019/02/28 jQuery
简单学习5种处理Vue.js异常的方法
2019/06/17 Javascript
layer 刷新某个页面的实现方法
2019/09/05 Javascript
javascript删除数组元素的七个方法示例
2019/09/09 Javascript
javascript实现页面的实时时钟显示示例
2020/08/06 Javascript
PyQt5 pyqt多线程操作入门
2018/05/05 Python
python截取两个单词之间的内容方法
2018/12/25 Python
基于pytorch中的Sequential用法说明
2020/06/24 Python
介绍一下EJB的体系结构
2012/08/01 面试题
毕业求职自荐信格式是什么
2013/11/19 职场文书
农村婚礼证婚词
2014/01/10 职场文书
构建高效课堂实施方案
2014/03/13 职场文书
关于对大人不礼貌的检讨书
2014/09/29 职场文书
银行求职信范文怎么写
2015/03/20 职场文书
2015年数学教师工作总结
2015/05/20 职场文书
2015大学迎新标语
2015/07/16 职场文书
python3.9之你应该知道的新特性详解
2021/04/29 Python