7-ng-repeat指令實例以及擴展部分

在前面的文章中學習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中擴展方法除了索引之外，都是布爾類型。

 

 

 

 

學習筆記，如有不足，請指正！轉載請保留原文鏈接，謝謝。

最後，微博求粉，謝謝。