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 相关文章推荐
AJAX异步从优酷专辑中采集所有视频及信息(JavaScript代码)
Nov 20 Javascript
用jquery和json从后台获得数据集的代码
Nov 07 Javascript
JavaScript常用脚本汇总(二)
Mar 04 Javascript
Highcharts使用简例及异步动态读取数据
Dec 30 Javascript
关于 jQuery Easyui异步加载tree的问题解析
Dec 06 Javascript
vue.js学习之递归组件
Dec 13 Javascript
JavaScript使用简单正则表达式的数据验证功能示例
Jan 13 Javascript
详解小程序原生使用ES7 async/await语法
Aug 06 Javascript
解决vue-cli webpack打包后加载资源的路径问题
Sep 25 Javascript
详解javascript replace高级用法
Feb 17 Javascript
原生javascript实现类似vue的数据绑定功能示例【观察者模式】
Feb 24 Javascript
jQuery带控制按钮轮播图插件
Jul 31 jQuery
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制作简单的内容采集器的代码
2007/11/28 PHP
PHP排序之二维数组的按照字母排序实现代码
2011/08/13 PHP
php遍历数组的4种方法总结
2014/07/05 PHP
PHP数组游标实现对数组的各种操作详解
2016/01/26 PHP
使用ThinkPHP的自动完成实现无限级分类实例详解
2016/09/02 PHP
PHP提取字符串中的手机号正则表达式怎么写
2017/07/17 PHP
PHP实现数据库的增删查改功能及完整代码
2018/04/18 PHP
laravel validate 设置为中文的例子(验证提示为中文)
2019/09/29 PHP
laravel框架中间件简单使用方法示例
2020/01/25 PHP
php中yar框架实例用法讲解
2020/12/27 PHP
使用Angular和Nodejs、socket.io搭建聊天室及多人聊天室
2015/08/21 NodeJs
jquery 点击元素后,滚动条滚动至该元素位置的方法
2016/08/05 Javascript
JavaScript省市区三级联动菜单效果
2016/09/21 Javascript
jQuery插件zTree实现清空选中第一个节点所有子节点的方法
2017/03/08 Javascript
利用adb shell和node.js实现抖音自动抢红包功能(推荐)
2018/02/22 Javascript
vue中created和mounted的区别浅析
2019/08/13 Javascript
使用typescript构建Vue应用的实现
2019/08/26 Javascript
微信小程序页面渲染实现方法
2019/11/06 Javascript
小程序实现投票进度条
2019/11/20 Javascript
JavaScript动画实例之粒子文本的实现方法详解
2020/07/28 Javascript
JavaScript 声明私有变量的两种方式
2021/02/05 Javascript
原生JavaScript实现换肤
2021/02/19 Javascript
Python MySQL数据库连接池组件pymysqlpool详解
2017/07/07 Python
python下PyGame的下载与安装过程及遇到问题
2019/08/04 Python
Python MOCK SERVER moco模拟接口测试过程解析
2020/04/13 Python
PyCharm安装PyQt5及其工具(Qt Designer、PyUIC、PyRcc)的步骤详解
2020/11/02 Python
css3边框_动力节点Java学院整理
2017/07/11 HTML / CSS
使用phonegap获取位置信息的实现方法
2017/03/31 HTML / CSS
英国鲜花速递:Serenata Flowers
2018/04/03 全球购物
商务英语大学生职业生涯规划书范文
2014/01/01 职场文书
端午节粽子促销活动方案
2014/02/02 职场文书
暑期培训随笔感言
2014/03/10 职场文书
大连星海广场导游词
2015/02/10 职场文书
离职证明范本
2015/06/12 职场文书
中学教师教学工作总结
2015/08/13 职场文书
2016年小学生清明节广播稿
2015/12/17 职场文书