angularjs中的排序和过滤

最新推荐文章于 2024-07-16 16:43:05 发布

weixin_30610755

最新推荐文章于 2024-07-16 16:43:05 发布

阅读量74

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/iagw/p/6849994.html

版权

页面效果：

说明：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>

转载于:https://www.cnblogs.com/iagw/p/6849994.html

weixin_30610755

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
angularjs中的排序和过滤

页面效果：说明：1.在输入框中输入姓名或年龄，可以对表格内的数据做过滤　　 2.点击姓名，可以对姓名字段做排序。排序方式可逆转。 3.点击年龄，可以对年龄字段做排序。排序方式可逆转。代码实现：<script> angular.module('myApp',[]) .controller('Aaa',['$sco...
复制链接

扫一扫