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 相关文章推荐
jQuery 处理表单元素的代码
Feb 15 Javascript
JS操作Cookies的小例子
Oct 15 Javascript
js改变Iframe中Src的方法
May 05 Javascript
Adapter适配器模式在JavaScript设计模式编程中的运用分析
May 18 Javascript
jQuery实现可以编辑的表格实例详解【附demo源码下载】
Jul 09 Javascript
微信小程序 window_x64环境搭建
Sep 30 Javascript
详解vue+vueRouter+webpack的简单实例
Jun 17 Javascript
vue中rem的配置的方法示例
Aug 30 Javascript
新手如何快速理解js异步编程
Jun 24 Javascript
Electron + vue 打包桌面操作流程详解
Jun 24 Javascript
vue中获取滚动table的可视页面宽度调整表头与列对齐(每列宽度不都相同)
Aug 17 Javascript
JSX在render函数中的应用详解
Sep 04 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
Thinkphp的volist标签嵌套循环使用教程
2014/07/08 PHP
php运行提示:Fatal error Allowed memory size内存不足的解决方法
2014/12/17 PHP
用php守护另一个php进程的例子
2015/02/13 PHP
Laravel 5框架学习之Eloquent 关系
2015/04/09 PHP
PHP检测数据类型的几种方法(总结)
2017/03/04 PHP
PHP-CGI远程代码执行漏洞分析与防范
2017/05/07 PHP
详解PHP函数 strip_tags 处理字符串缺陷bug
2017/06/11 PHP
PHP异步进程助手async-helper
2018/02/05 PHP
最好用的省市二级联动 原生js实现你值得拥有
2013/09/22 Javascript
document节点对象的获取方式示例介绍
2013/12/24 Javascript
用js读、写、删除Cookie代码分享及详细注释说明
2014/06/05 Javascript
JS使用cookie实现DIV提示框只显示一次的方法
2015/11/05 Javascript
基于jquery步骤进度条源码分享
2015/11/12 Javascript
全国省市二级联动下拉菜单 js版
2016/05/10 Javascript
jQuery获取Table某列的值(推荐)
2017/03/03 Javascript
jQuery插件HighCharts绘制2D带有Legend的饼图效果示例【附demo源码下载】
2017/03/10 Javascript
Angular2数据绑定详解
2017/04/18 Javascript
JavaScript闭包原理与用法实例分析
2018/08/10 Javascript
在vue中多次调用同一个定义全局变量的实例
2018/09/25 Javascript
webstorm中配置Eslint的两种方式及差异比较详解
2018/10/19 Javascript
基于jQuery实现可编辑的表格
2019/12/11 jQuery
Vue如何循环提取对象数组中的值
2020/11/18 Vue.js
element 动态合并表格的步骤
2020/12/31 Javascript
python利用不到一百行代码实现一个小siri
2017/03/02 Python
Python实现基于POS算法的区块链
2018/08/07 Python
一文秒懂python读写csv xml json文件各种骚操作
2019/07/04 Python
django rest framework 实现用户登录认证详解
2019/07/29 Python
python定位xpath 节点位置的方法
2019/08/27 Python
python3.8与pyinstaller冲突问题的快速解决方法
2020/01/16 Python
TensorFlow2.X使用图片制作简单的数据集训练模型
2020/04/08 Python
五型班组建设方案
2014/02/10 职场文书
2014年护理部工作总结
2014/11/14 职场文书
2015年119消防宣传日活动总结
2015/03/24 职场文书
2015国庆节宣传语
2015/07/14 职场文书
导游词之黄果树瀑布
2019/09/20 职场文书
一条 SQL 语句执行过程
2022/03/17 MySQL