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 相关文章推荐
XENON基于JSON变种
Jul 27 Javascript
自动最大化窗口的Javascript代码
May 22 Javascript
JavaScript中九种常用排序算法
Sep 02 Javascript
JavaScript中实现继承的三种方式和实例
Jan 29 Javascript
JS实现很酷的水波文字特效实例
Feb 26 Javascript
js中this用法实例详解
May 05 Javascript
js关于getImageData跨域问题的解决方法
Oct 14 Javascript
Vim快速合并行及vim 将文件所有行合并到一行
Nov 27 Javascript
详解vuex中mapState,mapGetters,mapMutations,mapActions的作用
Apr 13 Javascript
原生JS实现手动轮播图效果实例代码
Nov 22 Javascript
解决vue 界面在苹果手机上滑动点击事件等卡顿问题
Nov 27 Javascript
微信小程序自定义导航栏
Dec 31 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
php AJAX实例根据邮编自动完成地址信息
2008/11/23 PHP
Drupal读取Excel并导入数据库实例
2014/03/02 PHP
android上传图片到PHP的过程详解
2015/08/03 PHP
PHP实现批量重命名某个文件夹下所有文件的方法
2017/09/04 PHP
PHP中PCRE正则解析代码详解
2019/04/26 PHP
Yii框架通过请求组件处理get,post请求的方法分析
2019/09/03 PHP
远离JS灾难css灾难之 js私有函数和css选择器作为容器
2011/12/11 Javascript
jQuery.query.js 取参数的两点问题分析
2012/08/06 Javascript
js特殊字符转义介绍
2013/11/05 Javascript
JS常用正则表达式总结
2013/11/12 Javascript
javascript实现客户端兼容各浏览器创建csv并下载的方法
2015/03/23 Javascript
javascript常见数据验证插件大全
2015/08/03 Javascript
jQuery form 表单验证插件(fieldValue)校验表单
2016/01/24 Javascript
AngularJS入门教程之迭代器过滤详解
2016/08/18 Javascript
Node.js查找当前目录下文件夹实例代码
2017/03/07 Javascript
微信小程序实现缓存根据不同的id来进行设置和读取缓存
2017/06/12 Javascript
vue中component组件的props使用详解
2017/09/04 Javascript
详解vuex的简单使用
2018/03/12 Javascript
JavaScript禁用右键单击优缺点分析
2019/01/20 Javascript
微信小程序性能优化之checkSession的使用
2019/03/06 Javascript
layer的prompt弹出框,点击回车,触发确定事件的方法
2019/09/06 Javascript
Vue项目结合Vue-layer实现弹框式编辑功能(实例代码)
2020/03/11 Javascript
Python中字典映射类型的学习教程
2015/08/20 Python
Python如何生成树形图案
2018/01/03 Python
详解如何从TensorFlow的mnist数据集导出手写体数字图片
2019/08/05 Python
通过实例解析python描述符原理作用
2020/01/22 Python
基于Django OneToOneField和ForeignKey的区别详解
2020/03/30 Python
OpenCV Python实现图像指定区域裁剪
2021/03/12 Python
如何基于Python实现word文档重新排版
2020/09/29 Python
泰国王权免税店官方网站:KingPower
2019/03/11 全球购物
联谊会主持词
2014/03/26 职场文书
股东授权委托书范本
2014/09/13 职场文书
税务职业生涯规划书范文
2014/09/16 职场文书
2015年医院护理部工作总结
2015/04/23 职场文书
2015年语文教研组工作总结
2015/05/23 职场文书
领导干部学习三严三实心得体会
2016/01/05 职场文书