没有合适的资源?快使用搜索试试~ 我知道了~
资源推荐
资源详情
资源评论
Angularjs使用使用ng-repeat中中$even和和$odd属性的注意事项属性的注意事项
无可否认angularjs的崛起成为前端很大的福利,最近接到项目,框架便选中了angularjs。angularjs最吸引人的地方就是数据的双向绑定和
指令了,这篇文章主要介绍了Angularjs中使用ng-repeat的$even和$odd属性的注意事项,需要的朋友可以参考下
前言前言
JavaScript中数组的索引是从0开始的,因此我们再取奇偶的时候需要用!$even和!$odd来将$even和$odd的布尔值反转
下面给出一个实例:下面给出一个实例:
使用$odd和$even来制作一个红蓝相间的列表
<!DOCTYPE html>
<html lang="zh-CN" ng-app="app">
<head>
<meta charset="utf-8">
<title>ng-repeat的用法</title>
<link rel="stylesheet" href="../bootstrap.min.css">
<style>
.odd {
background-color: blue;
}
.even {
background-color: red;
}
</style>
</head>
<body>
<h4>ng-repeat用来遍历一个集合或为集合中的每个元素生成一个模板实例。集合中的每个元素 都会被赋予自己的模板和作用域。同时每个模板实例的作用域中都会暴露一些特殊的属性。 </h4>
<ul>
<li>$index:遍历的进度(0...length-1)。 </li>
<li>$first:当元素是遍历的第一个时值为true。</li>
<li>$middle:当元素处于第一个和后元素之间时值为true。 </li>
<li>$last:当元素是遍历的后一个时值为true。 </li>
<li>$even:当$index值是偶数时值为true。 </li>
<li>$odd:当$index值是奇数时值为true。 </li>
</ul>
下面的例子展示了如何用$odd和$even来制作一个红蓝相间的列表。记住,JavaScript中数组 的索引从0开始,因此我们用!$even和!$odd来将$even和$odd的布尔值反转。
<ul ng-controller="PeopleController">
<li ng-repeat="person in people" style="color: #fff;" ng-class="{even: !$even, odd: !$odd}">
{{ person.name }} 住在 {{ person.city }} {{$index}}
</li>
</ul>
<script src="../angular.min.js"></script>
<script>
angular.module('app', [])
.controller('PeopleController', ['$scope', function($scope) {
$scope.people = [
{name: '张三', city: '广东'},
{name: '李四', city: '江西'},
{name: '王五', city: '东北'}
]
}])
</script>
</body>
</html>
总结总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。
资源评论
weixin_38555616
- 粉丝: 2
- 资源: 886
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- #P0015. 全排列 超级简单
- pta题库答案c语言之排序4统计工龄.zip
- pta题库答案c语言之树结构7堆中的路径.zip
- pta题库答案c语言之树结构3TreeTraversalsAgain.zip
- pta题库答案c语言之树结构2ListLeaves.zip
- pta题库答案c语言之树结构1树的同构.zip
- 基于C++实现民航飞行与地图简易管理系统可执行程序+说明+详细注释.zip
- pta题库答案c语言之复杂度1最大子列和问题.zip
- 三维装箱问题(Three-Dimensional Bin Packing Problem,3D-BPP)是一个经典的组合优化问题
- 以下是一些关于Linux线程同步的基本概念和方法.txt
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功