angularjs中的排序和过滤

页面效果：

说明：1.在输入框中输入姓名或年龄，可以对表格内的数据做过滤

　　   2.点击姓名，可以对姓名字段做排序。排序方式可逆转。

        3.点击年龄，可以对年龄字段做排序。排序方式可逆转。

代码实现：

<script>
    angular.module('myApp',[])
    .controller('Aaa',['$scope','$filter',function($scope,$filter){
    var oriArr = [
        { name : "red" , age : "20" },
        { name : "yellow" , age : "40" },
        { name : "blue" , age : "30" },
        { name : "green" , age : "10" }
    ];
    $scope.dataList = oriArr;
    $scope.fnSort = function(arg){
        arguments.callee['fnSort'+arg] = !arguments.callee['fnSort'+arg];
        $scope.dataList = $filter('orderBy')($scope.dataList , arg , arguments.callee['fnSort'+arg] );
        
    };
    $scope.fnFilter = function(){
            $scope.dataList = $filter('filter')( oriArr , $scope.filterVal );
    };
}]);
</script>
</head>
<body>
    <div ng-controller="Aaa">
    <input type="text" ng-model="filterVal"><input type="button" ng-click="fnFilter()" 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>
</body>

 

posted @ 2017-05-13 19:24  陆漫漫  阅读(1579)  评论(0)  编辑  收藏  举报