快捷導(dǎo)航

Angular ng-repeat指令實(shí)例以及擴(kuò)展部分

更新時(shí)間：2016年12月26日 15:23:51 作者：小謝53

這篇文章主要為大家詳細(xì)介紹了Angular ng-repeat指令實(shí)例以及擴(kuò)展部分，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

在前面的文章中學(xué)習(xí)filter過濾器，現(xiàn)在在結(jié)合著看看ng-repeat指令，舉個(gè)例子。

<div ng-controller="Aaa">
 <table border="1">
 <tr>
  <th ng-click="fnSort('name')">顏色</th>
  <th ng-click="fnSort('age')">值</th>
 </tr>
 <tr ng-repeat="data in dataList">
  <td>{{data.name}}</td>
  <td>{{data.age}}</td>
 </tr>
 </table>
</div>
<script type="text/javascript">

 var m1 = angular.module('myApp',[]);

 m1.controller('Aaa',['$scope','$filter',function($scope,$filter){
 $scope.dataList = [
  {name : 'red',age : 20},
  {name : 'yellow',age : 30},
  {name : 'blue',age : 40},
  {name : 'green',age : 50}
 ];
 $scope.fnSort = function(type){
  arguments.callee['fnSort' + type] = !arguments.callee['fnSort' + type];
  $scope.dataList = $filter('orderBy')($scope.dataList,type,arguments.callee['fnSort' + type]);
 };
 }]);

</script>

先介紹一下ng-repeat指令，他是用來遍歷數(shù)據(jù)的。

ng-repeat="data in dataList"，dataList是控制器里的數(shù)據(jù)，data就好比變量名，視圖里的{{data.name}}表示數(shù)據(jù)里name對(duì)象。

其他的在前面都介紹過了。

在顏色和值上面綁定了fnSort方法，在fnSort方法里接受類型。

arguments.callee['fnSort' + type] = !arguments.callee['fnSort' + type]; 這句代碼得到一個(gè)布爾值，來使用filter的排序方法來控制數(shù)據(jù)的正反排序。

上面的例子很簡(jiǎn)單，我們?cè)贋樗由弦粋€(gè)搜索的功能！

 <div ng-controller="Aaa">
 <input type="text" ng-model="filterVal"><input type="button" ng-click="fnSearch()" value="搜索">
 <table border="1">
 <tr>
  <th ng-click="fnSort('name')">顏色</th>
  <th ng-click="fnSort('age')">值</th>
 </tr>
 <tr ng-repeat="data in dataList">
  <td>{{data.name}}</td>
  <td>{{data.age}}</td>
 </tr>
 </table>
</div>

<script type="text/javascript">

 var m1 = angular.module('myApp',[]);

 m1.controller('Aaa',['$scope','$filter',function($scope,$filter){
 $scope.dataList = [
  {name : 'red',age : 20},
  {name : 'yellow',age : 30},
  {name : 'blue',age : 40},
  {name : 'green',age : 50}
 ];
 $scope.fnSort = function(type){
  arguments.callee['fnSort' + type] = !arguments.callee['fnSort' + type];
  $scope.dataList = $filter('orderBy')($scope.dataList,type,arguments.callee['fnSort' + type]);
 };
 $scope.fnSearch = function(){
  $scope.dataList = $filter('filter')($scope.dataList,$scope.filterVal);
 };
 }]);

</script>

我們聲明了一個(gè)fnSearch方法，接受在視圖中的ng-model數(shù)據(jù)，再使用filter的篩選功能，是不是很方便，回想下如果是用JQ來實(shí)現(xiàn)需要多少代碼。

假設(shè)我們搜索'l'，那麼yellow和blue會(huì)正常的篩選出來。

并沒有問題，如果在次輸入'r'，應(yīng)該會(huì)篩選出red和green才對(duì)！可是我們發(fā)現(xiàn)什麼都沒有。。。

注意fnSearch方法里的這句代碼，$scope.dataList = $filter('filter')($scope.dataList,$scope.filterVal); 我們?cè)?scope.dataList數(shù)據(jù)里搜索，$scope.dataList在上一次搜索里，就僅剩yellow和blue兩條數(shù)據(jù)，所以就搜索不到關(guān)于'r'的數(shù)據(jù)了，這個(gè)時(shí)候就聲明一個(gè)局部的變量，方便第二次搜索依然是完整的數(shù)據(jù)。

完整代碼：

<div ng-controller="Aaa">
 <input type="text" ng-model="filterVal"><input type="button" ng-click="fnSearch()" value="搜索">
 <table border="1">
 <tr>
  <th ng-click="fnSort('name')">顏色</th>
  <th ng-click="fnSort('age')">值</th>
 </tr>
 <tr ng-repeat="data in dataList">
  <td>{{data.name}}</td>
  <td>{{data.age}}</td>
 </tr>
 </table>
</div>

<script type="text/javascript">

 var m1 = angular.module('myApp',[]);

 m1.controller('Aaa',['$scope','$filter',function($scope,$filter){
 var oriArr = [
  {name : 'red',age : 20},
  {name : 'yellow',age : 30},
  {name : 'blue',age : 40},
  {name : 'green',age : 50}
 ];
 $scope.dataList = oriArr;
 $scope.fnSort = function(type){
  arguments.callee['fnSort' + type] = !arguments.callee['fnSort' + type];
  $scope.dataList = $filter('orderBy')($scope.dataList,type,arguments.callee['fnSort' + type]);
 };
 $scope.fnSearch = function(){
  $scope.dataList = $filter('filter')(oriArr,$scope.filterVal);
 };
 }]);

</script>

上面用了ng-repeat只是最簡(jiǎn)單的遍歷，現(xiàn)在看看ng-repeat的擴(kuò)展部分。

ng-repeat-start以及ng-repeat-end，他們可以靈活控制遍歷形式。

<div ng-controller="Aaa">
 <div ng-repeat-start="data in dataList" class="active">{{data.name}}</div>
 <p>{{data.age}}</p>
 <div ng-repeat-end>{{data.name}}</div>
</div>

<script type="text/javascript">
 var m1 = angular.module('myApp',[]);
 m1.controller('Aaa',['$scope',function($scope){
 $scope.dataList = [
  {name : 'red',age : 20},
  {name : 'yellow',age : 30},
  {name : 'blue',age : 40},
  {name : 'green',age : 50}
 ];
 }]);

</script>

除此之外，還有6中擴(kuò)展方法，還是上面的例子。

<div ng-controller="Aaa">
 <ul>
  <li class="{{$even ? 'active' : ''}}" is-even="{{$even}}" ng-repeat="data in dataList" data-i="{{$index}}">{{data.name}}</li>
  <!-- $index 索引，值 -->
  <!-- $first 第一個(gè)值，布爾類型 -->
  <!-- $last 最後一個(gè)值，布爾類型 -->
  <!-- $middle 去除頭尾的中間項(xiàng)，布爾類型 -->
  <!-- $even 奇數(shù)，布爾類型 -->
  <!-- $odd 偶數(shù)，布爾類型 -->
 </ul>
</div>

<script type="text/javascript">

 var m1 = angular.module('myApp',[]);

 m1.controller('Aaa',['$scope',function($scope){
  $scope.dataList = [
   {name : 'red',age : 20},
   {name : 'yellow',age : 30},
   {name : 'blue',age : 40},
   {name : 'green',age : 50}
  ];
 }]);

</script>

這6中擴(kuò)展方法除了索引之外，都是布爾類型。