AngularJS基础 ng-class-odd 指令示例


Posted in Javascript onAugust 01, 2016

AngularJS ng-class-odd 指令

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-odd="'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-odd 指令用于为 HTML 元素动态的绑定一个或多个 CSS 类,但只作用于奇数行。

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

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

语法

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

所有 HTML 元素都支持。

参数值

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

以上就是对AngularJS资料的整理,有需要的朋友参考下。

Javascript 相关文章推荐
javascript计时器事件使用详解
Jan 07 Javascript
js中的for如何实现foreach中的遍历
May 31 Javascript
JavaScript获取Url里的参数
Dec 18 Javascript
深入理解JavaScript系列(33):设计模式之策略模式详解
Mar 03 Javascript
javascript实现链接单选效果的方法
May 13 Javascript
前端框架Vue.js中Directive知识详解
Sep 12 Javascript
Javascript获取图片原始宽度和高度的方法详解
Sep 20 Javascript
微信小程序 页面传值详解
Mar 10 Javascript
Angular2开发环境搭建教程之VS Code
Dec 15 Javascript
Vue 前端实现登陆拦截及axios 拦截器的使用
Jul 17 Javascript
Angular 多模块项目构建过程
Feb 13 Javascript
express异步函数异常捕获示例详解
Nov 30 Javascript
js添加千分位的实现代码(超简单)
Aug 01 #Javascript
AngularJs定制样式插入到ueditor中的问题小结
Aug 01 #Javascript
jQuery的ajax和遍历数组json实例代码
Aug 01 #Javascript
JS遍历页面所有对象属性及实现方法
Aug 01 #Javascript
AngularJS 基础ng-class-even指令用法
Aug 01 #Javascript
jQuery EasyUI API 中文帮助文档和扩展实例
Aug 01 #Javascript
AngularJS入门教程之ng-class 指令用法
Aug 01 #Javascript
You might like
Mysql的GROUP_CONCAT()函数使用方法
2008/03/28 PHP
php取出数组单个值的方法
2018/03/12 PHP
PHP设计模式之工厂方法设计模式实例分析
2018/04/25 PHP
使用PHP开发留言板功能
2019/11/19 PHP
JS实现距离上次刷新已过多少秒示例
2014/05/23 Javascript
基于zepto.js实现仿手机QQ空间的大图查看组件ImageView.js详解
2015/03/05 Javascript
JavaScript将字符串转换成字符编码列表的方法
2015/03/19 Javascript
jQuery实现图片预加载效果
2015/11/27 Javascript
jquery模拟多级复选框效果的简单实例
2016/06/08 Javascript
Vue.js快速入门教程
2016/09/07 Javascript
微信小程序 自定义消息提示框
2017/08/06 Javascript
jQuery Validate插件ajax方式验证输入值的实例
2017/12/21 jQuery
vue iView 上传组件之手动上传功能
2018/03/16 Javascript
微信小程序商品详情页的底部弹出框效果
2020/11/16 Javascript
详解React 服务端渲染方案完美的解决方案
2018/12/14 Javascript
微信小程序HTTP接口请求封装的实现
2019/02/21 Javascript
vue单元格多列合并的实现
2020/11/26 Vue.js
JavaScript 绘制饼图的示例
2021/02/19 Javascript
[01:16:28]DOTA2-DPC中国联赛 正赛 iG vs Magma BO3 第二场 2月23日
2021/03/11 DOTA
python字典排序实例详解
2015/05/20 Python
详解Python各大聊天系统的屏蔽脏话功能原理
2016/12/01 Python
详解Django之admin组件的使用和源码剖析
2018/05/04 Python
opencv python 图像去噪的实现方法
2018/08/31 Python
python+rsync精确同步指定格式文件
2019/08/29 Python
Python csv文件的读写操作实例详解
2019/11/19 Python
Python partial函数原理及用法解析
2019/12/11 Python
Django Serializer HiddenField隐藏字段实例
2020/03/31 Python
BeautifulSoup中find和find_all的使用详解
2020/12/07 Python
新西兰优惠网站:Treat Me
2019/07/04 全球购物
利用指针变量实现队列的入队操作
2012/04/07 面试题
Why do we need Unit test
2013/01/03 面试题
咖啡书吧创业计划书
2014/01/13 职场文书
淘宝活动总结范文
2014/06/26 职场文书
2015迎新晚会活动总结
2015/07/16 职场文书
动漫APP软件排行榜前十名,半次元上榜,第一款由腾讯公司推出
2022/03/18 杂记
ant design charts 获取后端接口数据展示
2022/05/25 Javascript