AngularJS實戰之ng-repeat的詳細用法

1、基本語法

{{$index}}:獲取元素的下標。

{{$first}}：判斷當前元素是不是第一個元素，是則爲true，不然：false；

{{$last}}：判斷當前元素是不是最後一個元素，是則爲true，不然：false；

{{$middle }}：判斷當前元素是不是中間元素，，是則爲true，不然：false；

{{ $odd}}：判斷當前元素是不是奇數，，是則爲true，不然：false；

{{ $even}}:判斷當前元素是不是偶數，，是則爲true，不然：false；

2、嵌套ng-repeat 獲取父級的屬性用{{$parent.$index}}，固然一個也能夠多個$parent方式獲取父級的父級。

3、排序、過濾

<!--升序  -->
  	<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>

4、錯誤解決

這個錯誤是angular數組中有兩個級以上相同的數字，想要解決須要使用track by $index來規避這個錯誤，也可使用當前元素中的內容來充當例如ng-repeat="item in list track by item.id "

5、坑 咱們不少時候會使用angular的$index看成下標進行一系列操做，可是這裏要注意了，當咱們使用了filter過濾了數組會致使下標不許確，此時咱們應該使用元素自己做爲條件操做。