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

一、基本语法

{{$index}}:获取元素的下标。

{{$first}}：判断当前元素是否是第一个元素，是则为true，否则：false；

{{$last}}：判断当前元素是否是最后一个元素，是则为true，否则：false；

{{$middle }}：判断当前元素是否是中间元素，，是则为true，否则：false；

{{ $odd}}：判断当前元素是否是奇数，，是则为true，否则：false；

{{ $even}}:判断当前元素是否是偶数，，是则为true，否则：false；

二、嵌套ng-repeat

获取父级的属性用{{$parent.$index}}，当然一个也可以多个$parent方式获取父级的父级。

三、排序、过滤

  <!--升序  -->

  	<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>

四、错误解决

这个错误是angular数组中有两个级以上相同的数字，想要解决需要使用track by $index来规避这个错误，也可以使用当前元素中的内容来充当例如ng-repeat="item in list track by item.id "

五、坑

我们很多时候会使用angular的$index当作下标进行一系列操作，但是这里要注意了，当我们使用了filter过滤了数组会导致下标不准确，此时我们应该使用元素本身作为条件操作。

end：例子代码见附件

巴特西

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

最新文章

热门文章