AngularJS实战之ng-repeat的详细用法

本文详细介绍了AngularJS中ng-repeat指令的基本用法、嵌套使用、排序与过滤操作及常见错误处理方法,并提供了实例代码。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

[color=red][size=x-large]一、基本语法[/size][/color]
[size=medium]{{$index}}:获取元素的下标。
{{$first}}:判断当前元素是否是第一个元素,是则为true,否则:false;
{{$last}}:判断当前元素是否是最后一个元素,是则为true,否则:false;
{{$middle }}:判断当前元素是否是中间元素,,是则为true,否则:false;
{{ $odd}}:判断当前元素是否是奇数,,是则为true,否则:false;
{{ $even}}:判断当前元素是否是偶数,,是则为true,否则:false;[/size]
[color=red][size=x-large]二、嵌套ng-repeat[/size][/color]
[size=medium]获取父级的属性用{{$parent.$index}},当然一个也可以多个$parent方式获取父级的父级。[/size]
[color=red][size=x-large]三、排序、过滤[/size][/color]
  <!--升序  -->
<div ng-repeat="item in grandfather|orderBy: 'letter'" style="background-color: red;"> {{item.letter}}</div>
<!--降序 -->
<div ng-repeat="item in grandfather|orderBy: '-letter'" style="background-color: green;"> {{item.letter}}</div>
<!--多个排序 -->
<div ng-repeat="item in grandfathermore|orderBy: ['-letter','name']" style="background-color: #388cff;"> {{item.name}}</div>
<!--多个排序+过滤 -->
<div ng-repeat="item in grandfathermore|orderBy: ['-letter','name']|filter:'o'" style="background-color: #333;"> {{item.name}}</div>
</body>
<script type="text/javascript" src="../plugins/angular/angular.js"></script>
<script type="text/javascript">
var lxApp=angular.module("lxApp",[]);
lxApp.controller("lxCtrl",function($scope){
$scope.grandfather=[{"letter":"a"},{"letter":"b"}];
$scope.grandfathermore=[{"letter":"a","name":"lx"},{"letter":"a","name":"kebo"}];
});
</script>

[color=red][size=x-large]四、错误解决[/size][/color]
[img]http://dl2.iteye.com/upload/attachment/0127/3664/998625e3-0d01-3165-82ce-8dab2beba588.png[/img]

[size=medium]这个错误是angular数组中有两个级以上相同的数字,想要解决需要使用track by $index来规避这个错误,也可以使用当前元素中的内容来充当例如ng-repeat="item in list track by item.id "[/size]
[color=red][size=x-large]五、坑[/size][/color]
[size=medium]我们很多时候会使用angular的$index当作下标进行一系列操作,但是这里要注意了,当我们使用了filter过滤了数组会导致下标不准确,此时我们应该使用元素本身作为条件操作。[/size]
[color=brown][size=x-large]end:例子代码见附件[/size][/color]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值