AngularJS 排序

来源：互联网发布：倩女幽魂有mac版吗编辑：程序博客网时间：2024/06/05 06:22

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>

阅读全文

0 0