• 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>
  • 相关阅读:
    用python将博客园的文章爬取到本地
    2016.7.9
    2016.7.8
    2016.7.7
    2016.7.5
    2016.7.4
    2016.7.3
    2016.7.2
    2016.6.28
    2016.6.27
  • 原文地址:https://www.cnblogs.com/iagw/p/6849994.html
Copyright © 2020-2023  润新知