Angularjs使用ng-repeat中$even和$odd属性的注意事项
GPT4.0+Midjourney绘画+国内大模型 会员永久免费使用!
【 如果你想靠AI翻身,你先需要一个靠谱的工具! 】
前言
JavaScript中数组的索引是从0开始的,因此我们再取奇偶的时候需要用!$even和!$odd来将$even和$odd的布尔值反转
下面给出一个实例:
使用$odd和$even来制作一个红蓝相间的列表
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 | <!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 > |
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。
微信公众号搜索 “ 脚本之家 ” ,选择关注
程序猿的那些事、送书等活动等着你
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若内容造成侵权/违法违规/事实不符,请将相关资料发送至 reterry123@163.com 进行投诉反馈,一经查实,立即处理!
相关文章
详解angular2实现ng2-router 路由和嵌套路由
本篇文章主要介绍了详解angular2实现ng2-router 路由和嵌套路由,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧2017-03-03微信+angularJS的SPA应用中用router进行页面跳转,jssdk校验失败问题解决
本文主要介绍微信+angularJS的SPA应用中用router进行页面跳转,jssdk校验失败问题解决,这里提供了详细的操作方式,有需要的小伙伴可以参考下2016-09-09
最新评论