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 相关文章推荐
使用apply方法处理数组的三个技巧[译]
Sep 20 Javascript
Js使用WScript.Shell对象执行.bat文件和cmd命令
Dec 18 Javascript
jQuery之DOM对象和jQuery对象的转换与区别分析
Jan 08 Javascript
学习JavaScript设计模式之享元模式
Jan 18 Javascript
JS 拦截全局ajax请求实例解析
Nov 29 Javascript
jQuery图片轮播实现并封装(一)
Dec 03 Javascript
JavaScript实现格式化字符串函数String.format
Dec 16 Javascript
详解Vue webapp项目通过HBulider打包原生APP
Jun 29 Javascript
vue-cli 打包后提交到线上出现 &quot;Uncaught SyntaxError:Unexpected token&quot; 报错
Nov 06 Javascript
Node使用Selenium进行前端自动化操作的代码实现
Oct 10 Javascript
vue 在methods中调用mounted的实现操作
Aug 07 Javascript
用vue写一个日历
Nov 02 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
一个显示天气预报的程序
2006/10/09 PHP
php 变量定义方法
2009/06/14 PHP
php使用Jpgraph绘制柱形图的方法
2015/06/10 PHP
php入门教程之Zend Studio设置与开发实例
2016/09/09 PHP
PHP面向对象程序设计类的定义与用法简单示例
2016/12/27 PHP
javascript String 的扩展方法集合
2008/06/01 Javascript
JQuery 构建客户/服务分离的链接模型中Table分页代码效率初探
2010/01/22 Javascript
jquery ajax post提交数据乱码
2013/11/05 Javascript
JQuery页面的表格数据的增加与分页的实现
2013/12/10 Javascript
js锁屏解屏通过对$.ajax进行封装实现
2014/07/31 Javascript
jQuery源码分析之jQuery中的循环技巧详解
2014/09/06 Javascript
javascript转换日期字符串为Date日期对象的方法
2015/02/13 Javascript
jQuery插件ajaxFileUpload实现异步上传文件效果
2015/04/14 Javascript
javascript 闭包详解
2015/07/02 Javascript
Bootstrap Table服务器分页与在线编辑应用总结
2016/08/08 Javascript
AngularJS ng-repeat数组有重复值的解决方法
2016/10/23 Javascript
jQuery实现div跟随鼠标移动
2020/08/20 jQuery
weex里Vuex state使用storage持久化详解
2017/09/09 Javascript
React中jquery引用的实现方法
2017/09/12 jQuery
实例讲解JavaScript预编译流程
2019/01/24 Javascript
vue项目在webpack2实现移动端字体自适配功能
2020/06/02 Javascript
[02:37]TI8勇士令状不朽珍藏II视频展示
2018/06/23 DOTA
linux系统使用python监测网络接口获取网络的输入输出
2014/01/15 Python
python如何查看系统网络流量的信息
2016/09/12 Python
Python线程条件变量Condition原理解析
2020/01/20 Python
python利用Excel读取和存储测试数据完成接口自动化教程
2020/04/30 Python
实列教程 一款基于jquery和css3的响应式二级导航菜单
2014/11/13 HTML / CSS
html5 canvas绘制矩形和圆形的实例代码
2016/06/16 HTML / CSS
安全标准化实施方案
2014/02/20 职场文书
房地产财务部员工岗位职责
2014/03/12 职场文书
工程承诺书怎么写
2014/05/24 职场文书
教师四风自我剖析材料
2014/09/30 职场文书
2016年安康杯竞赛活动总结
2016/04/05 职场文书
个人工作总结怎么写?
2019/04/09 职场文书
带你了解Java中的ForkJoin
2022/04/28 Java/Android
Redis特殊数据类型Geospatial地理空间
2022/06/01 Redis