angular表格生成，顺逆排序，搜索

最新推荐文章于 2024-06-04 16:16:05 发布

酷jjs

最新推荐文章于 2024-06-04 16:16:05 发布

阅读量856

点赞数

分类专栏：前端笔记 angular 文章标签： angular 搜索排序表单

本文链接：https://blog.csdn.net/qq_32584661/article/details/53126823

版权

前端笔记同时被 2 个专栏收录

165 篇文章 2 订阅

订阅专栏

angular

3 篇文章 0 订阅

订阅专栏

<!doctype html>
<html  ng-app="myApp1">
<head>
    <meta charset="UTF-8">
    <title>angular表格生成，顺逆排序，搜索</title>

    <script src="../src/angular.min.js"></script>
    <script>

        var m1=angular.module('myApp1',[]);

        m1.controller('aaa',['$scope','$filter',function ($scope,$filter) {

            var oriArr=[
                {'name':'aaa','age':'25'},
                {'name':'bbb','age':'23'},
                {'name':'sss','age':'20'},
                {'name':'aaa','age':'40'},
                {'name':'fff','age':'15'},
                {'name':'rrr','age':'12'}
            ];

            $scope.dataList = oriArr;

            /排序方法//

            /*    点击表单标题按标题所在列正向排序
            $scope.fnSort=function(arg){
                $scope.dataList =$filter('orderBy')($scope.dataList,arg);
            };*/
            //     点击表单标题按标题所在列一次正向排序，一次逆向排序
            $scope.fnSort=function(arg){
                arguments.callee['fnSort'+arg] = !arguments.callee['fnSort'+arg];    //一次为true，一次为false
                $scope.dataList =$filter('orderBy')($scope.dataList,arg,arguments.callee['fnSort'+arg]);
            };
            /搜索方法//

           /*重新搜索*/
             $scope.fnFilter1=function(){
             $scope.dataList =$filter('filter')(oriArr,$scope.filterVal1);
             };

            /*二次搜索*/
            $scope.fnFilter2=function(){
                $scope.dataList =$filter('filter')($scope.dataList,$scope.filterVal2);
            };


        }]);

    </script>
    <style>
        .name{color:red;cursor: pointer;width:140px;}
    </style>

</head>
<body>
<div  ng-controller="aaa">
    <p>表单遍历生成，点击标题按所点击的列表内容进行正序排列，再点击进行逆序排列</p>
    <p>重新搜索：在原数据搜索；二次搜索：在搜索结果搜索</p>
    <input type="text" ng-model="filterVal1"><input type="button" value="重新搜索" data-ng-click="fnFilter1()">
    <br><br>
    <input type="text" ng-model="filterVal2"><input type="button" value="二次搜索" data-ng-click="fnFilter2()">
    <br><br>
    <table border="1">
        <tr>
            <th data-ng-click="fnSort('name')" class="name">name</th>
            <th data-ng-click="fnSort('age')" class="name">age</th>
        </tr>
        <tr ng-repeat="data in dataList">
            <td>{{data.name}}</td>
            <td>{{data.age}}</td>
        </tr>
    </table>

</div>

<br><br><br><br><br><br>

</body>
</html>