AngularJS 排序

最新推荐文章于 2021-08-11 09:10:49 发布

ms_勇往直前

最新推荐文章于 2021-08-11 09:10:49 发布

阅读量1.1k

点赞数

文章标签： angularjs

本文链接：https://blog.csdn.net/mhw828/article/details/78612364

版权

AngularJS 排序

2017/11/23 10:09:38

方式一（使用字段和标记）

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>

        <style type="text/css">


            table {
                text-align: center;
            }

            th {
                width: 200px;
            }

        </style>


        <script type="text/javascript" src="js/angular.min.js"></script>


        <script type="text/javascript">

            var app = angular.module("msApp", [])
            //控制器
            app.controller("msCtrl", function ($scope, $filter) {


                    //数组数据
                    $scope.datas = [


                        {id: 0, name: 'zhangsan', age: 21, date: 1512517730000},
                        {id: 1, name: 'lisi', age: 17, date: 1513567730000},
                        {id: 2, name: 'wangwu', age: 10, date: 1541567730000},
                        {id: 3, name: 'zhaoliu', age: 20, date: 1551567730000},
                        {id: 4, name: 'maqi', age: 23, date: 1516567730000},
                        {id: 5, name: 'wangxiaoming', age: 9, date: 1517567730000},
                        {id: 6, name: 'lixiaolong', age: 5, date: 1518567730000},
                        {id: 7, name: 'zhaoxiaoguang', age: 28, date: 1519567730000},
                        {id: 8, name: 'libaosi', age: 12, date: 1599567730000}

                    ]

                    //select 数组
                    $scope.selects = ["选择排序", "id正序排序", "id倒序排序", "年龄正序排序", "年龄倒序排序", "日期正序排序", "日期倒序排序"]


                    //下拉选择排序判断
                    $scope.selchange = function () {

                        if ($scope.sel == $scope.selects[1]) {

                            //按照title排序
                            $scope.title = 'id'
                            //升序
                            $scope.desc = false;


                        } else if ($scope.sel == $scope.selects[2]) {

                            //按照title排序
                            $scope.title = 'id'
                            //降序
                            $scope.desc = true;


                        } else if ($scope.sel == $scope.selects[3]) {

                            $scope.title = 'age'
                            $scope.desc = false;


                        } else if ($scope.sel == $scope.selects[4]) {
                            $scope.title = 'age'
                            $scope.desc = true;

                        } else if ($scope.sel == $scope.selects[5]) {

                            $scope.title = 'date'
                            $scope.desc = true;

                        } else if ($scope.sel == $scope.selects[6]) {

                            $scope.title = 'date'
                            $scope.desc = false;
                        }

                    }

                }
            )


        </script>

    </head>
    <body ng-app="msApp" ng-controller="msCtrl">


    <table border="1">

        <tr>
            <!-- 选择 id排序          升序降序 来回轮询 -->
            <th ng-click="title='id'; desc=!desc">
                id
            </th>
            <th ng-click="title='name';desc=!desc">
                name
            </th>
            <th ng-click="title='age';desc=!desc">
                age
            </th>
            <th ng-click="title='date' ; desc=!desc">
                date
            </th>

        </tr>
        <!--                              排序       升序降序标记   -->
        <tr ng-repeat=" item in datas|orderBy:title:desc">

            <td>{{item.id}}</td>
            <td>{{item.name}}</td>
            <td>{{item.age}}</td>
            <td>{{item.date |date :'yyyy-MM-dd HH:mm:ss:sss'}}</td>
        </tr>
    </table>


    <button ng-click="title='id';desc=!desc">id排序</button>
    <button ng-click="title='age';desc=!desc">年龄排序</button>
    <button ng-click="title='date';desc=!desc">日期排序</button>

    <br>

    <select ng-model="sel" ng-init="sel =selects[0] " ng-options="item for item in selects" ng-change="selchange()">


    </select>

    </body>
    </html>

方式二（使用+ -）

代码

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>


        <style type="text/css">

            table {

                text-align: center;

            }

            td {

                width: 100px;

            }

        </style>


        <script type="text/javascript" src="js/angular.min.js"></script>


        <script type="text/javascript">

            var app = angular.module("msApp", []);


            app.controller("msCtrl", function ($scope) {


                $scope.selects = ["选择排序", "id正序", "id降序", "年龄正序", "年龄倒序"]

                $scope.datas = [

                    {id: 0, name: "张三", age: 45},

                    {id: 1, name: "李四", age: 43},

                    {id: 2, name: "王五", age: 40},

                    {id: 3, name: "赵六", age: 33},

                    {id: 4, name: "周七", age: 32}
                ]



                /****************核心代码*************/
                $scope.selchange = function () {


                    if ($scope.sel == $scope.selects[1]) {
                        // ord 设置为+id 正序排序
                        $scope.ord = "+id"
                    } else if ($scope.sel == $scope.selects[2]) {
                        // ord 设置为-id 倒序排序
                        $scope.ord = "-id"
                    } else if ($scope.sel == $scope.selects[3]) {
                        $scope.ord = "age"
                    } else if ($scope.sel == $scope.selects[4]) {
                        $scope.ord = "-age"
                    }

                }


            })


        </script>

    </head>
    <body ng-app="msApp" ng-controller="msCtrl">

    <select ng-model="sel" ng-init="sel=selects[0]" ng-options="item for item in selects" ng-change="selchange()"></select>

    <table border="1px">

        <tr>
            <th>id</th>
            <th>name</th>
            <th>age</th>


        </tr>
        <!--                         使用+-标记字段排序  -->
        <tr ng-repeat="item in datas|orderBy :ord">
            <td>{{item.id}}</td>
            <td>{{item.name}}</td>
            <td>{{item.age}}</td>

        </tr>
    </table>

    </body>
    </html>