在前面的文章中學習filter過濾器，現在在結合著看看ng-repeat指令，舉個例子。
<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指令，他是用來遍歷數據的。
ng-repeat="data in dataList"，dataList是控制器里的數據，data就好比變量名，視圖里的{{data.name}}表示數據里name對象。
其他的在前面都介紹過了。
在顏色和值上面綁定了fnSort方法，在fnSort方法里接受類型。
arguments.callee['fnSort' + type] = !arguments.callee['fnSort' + type]; 這句代碼得到一個布爾值，來使用filter的排序方法來控制數據的正反排序。
上面的例子很簡單，我們再為它加上一個搜索的功能！
<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>我們聲明了一個fnSearch方法，接受在視圖中的ng-model數據，再使用filter的篩選功能，是不是很方便，回想下如果是用JQ來實現需要多少代碼。
假設我們搜索'l'，那麼yellow和blue會正常的篩選出來。
并沒有問題，如果在次輸入'r'，應該會篩選出red和green才對！可是我們發現什麼都沒有。。。
注意fnSearch方法里的這句代碼，$scope.dataList = $filter('filter')($scope.dataList,$scope.filterVal); 我們在$scope.dataList數據里搜索，$scope.dataList在上一次搜索里，就僅剩yellow和blue兩條數據，所以就搜索不到關于'r'的數據了，這個時候就聲明一個局部的變量，方便第二次搜索依然是完整的數據。
完整代碼：
<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只是最簡單的遍歷，現在看看ng-repeat的擴展部分。
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中擴展方法，還是上面的例子。
<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 第一個值，布爾類型 --> <!-- $last 最後一個值，布爾類型 --> <!-- $middle 去除頭尾的中間項，布爾類型 --> <!-- $even 奇數，布爾類型 --> <!-- $odd 偶數，布爾類型 --> </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中擴展方法除了索引之外，都是布爾類型。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
