码迷,mamicode.com
首页 > 编程语言 > 详细

angularjs中的排序和过滤

时间:2017-05-13 20:09:15      阅读:170      评论:0      收藏:0      [点我收藏+]

标签:func   排序   name   姓名   ges   年龄   text   type   arguments   

页面效果:

技术分享

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

 

angularjs中的排序和过滤

标签:func   排序   name   姓名   ges   年龄   text   type   arguments   

原文地址:http://www.cnblogs.com/iagw/p/6849994.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!