Angularjs 前端数据用orderBy排序，单表头和多表头处理，单表头不默认排序

  orderBy这个功能其实是内置的过滤器，他可以在html和js代码中使用

　　　　html：{{ orderBy_expression | orderBy : expression : reverse}}

　　　　js    ：$filter('orderBy')(array, expression, reverse)

　　　　在这里我们只看html标签的运用，可以看出来他需要传入三个值

　　　　　　1.orderBy_expression ：你需要排序的数组

　　　　　　2.expression ：你需要根据哪个条件排序

　　　　　　3.reverse ：正序还是倒序（boolean)

下面是单个表头：

<table class="table table-bordered table-striped table-hover">                    <thead>                        <tr>                            <th class="m-th" ng-repeat="service in servicesTitle" ng-click="toggle_sort(service.name,'services')">                                {{service.value}}                                <i class="position-rg" ng-class="{'fa fa-sort-desc sort_bg':isSortUp(service.name,'services'),'fa fa-sort-asc sort_bg':isSortDown(service.name,'services')}"></i>                                <i class="fa fa-sort position-rg" aria-hidden="true"></i>                            </th>                        </tr>                    </thead>                    <tbody ng-show="services.filteredList.length == 0">                        <tr>                            <td colspan="1">没有查询到任何数据</td>                        </tr>                    </tbody>                    <tbody>                        <tr ng-click="getServiceNodesList(info)" ng-class="statusStyle(info)" ng-repeat="info in services.filteredList | filter:search.serviceName | ownOrderBy:services.sort:services.reverse | pagination:services.pageNo:services.pageSize">                            <td>{{info}}</td>                        </tr>                    </tbody></table>

下面是多个表头：

<table class="table table-bordered table-striped table-hover">                    <thead>                        <tr>                            <th>选中</th>                            <th ng-repeat="node in nodesTitle" class="m-th" ng-click="toggle_sort(node.name,'nodes')">                                {{node.value}}                                <i class="position-rg" ng-class="{'fa fa-sort-desc sort_bg':isSortUp(node.name,'nodes'),'fa fa-sort-asc sort_bg':isSortDown(node.name,'nodes')}"></i>                                <i class="fa fa-sort position-rg" aria-hidden="true"></i>                            </th>                        </tr>                    </thead>                    <tbody ng-show="nodes.filteredList.length == 0">                        <tr>                            <td colspan="4">没有查询到任何数据</td>                        </tr>                    </tbody>                    <tbody>                        <tr ng-repeat="info in nodes.filteredList | filter:search.nodeName | orderBy:nodes.sort:nodes.reverse | pagination:nodes.pageNo:nodes.pageSize">                            <td><input type="checkbox" id="nodeNameCheck{{info.nodeName}}" ng-click="selectNode(info);"                                        ng-model="info.checked"></input>                            </td>                            <td>{{info.nodeName}}</td>                            <td>{{info.nodeIp}}</td>                            <td>{{info.fluidSpeedSize}}</td>                        </tr>                    </tbody>                </table>

js中表头定义：

$scope.servicesTitle = [{            "name": 'service',            "value": '服务列表'        }        ];        $scope.nodesTitle = [{            "name": 'nodeName',            "value": '节点名称'        }, {            "name": 'nodeIp',            "value": '节点IP'        }, {            "name": 'fluidSpeedSize',            "value": '流控参数值'        }        ];

js中排序变量定义：

 $scope.services = {            sort: undefined, //用来排序的字段            reverse: false, //用于排序升序降序            filteredList: []//条件过滤后的结果        }; $scope.nodes = {            sort: undefined, //用来排序的字段             reverse: false, //用于排序升序降序            filteredList: []//条件过滤后的结果        };

js中ng-click排序方法，和排序图标显示

       $scope.toggle_sort = function (filedName, name) {            if ($scope[name].sort === filedName) {                $scope[name].reverse = !$scope[name].reverse;            } else {                $scope[name].sort = filedName;                $scope[name].reverse = false;            }        }        //用于显示指示器        $scope.isSortUp = function (filedName, name) {            return $scope[name].sort === filedName && !$scope[name].reverse;        }        $scope.isSortDown = function (filedName, name) {            return $scope[name].sort === filedName && $scope[name].reverse;        }

自己写的ownOrderBy过滤器

'use strict';angular.module("adminApp")     .filter('ownOrderBy',['$filter',function($filter){         return function(inputArray,sort,reverse){            if(sort === undefined){               return inputArray;            } else {                if(reverse === false){                    var temp = $filter('orderBy')(inputArray, undefined, reverse);                }else{                   var temp = $filter('orderBy')(inputArray, sort, reverse);                }               return temp;            }           }     }]);

解释：

        之所以要在单表头的时候，自己写一个过滤器，是因为angularjs内置的orderBy在单表头的时候默认给我升序排序了，而他的排序又只是在视图层面更新，不会更新我的scope域中的数据，可是我需要获取第一行的值，使那一行高亮，并传给另一个服务，获取相关联的其他数据。

        尝试了半天，把排序字段初始值设置为undefined和null，他都会给我排序，所以干脆自己写一个过滤器。

        判断一下，初始的时候，如果排序字段是undefined，则返回原数组即可，否则，用angular自带的orderBy。后面因为reverse===false升序的时候，它又没有升序，把排序字段变为undefined的时候，他就默认升序了。所以才又针对reverse做了一次判断。

        个人觉得可能是单表头的原因，因为多个表头的时候，就没有这种问题，多个表头的时候，初始排序字段为undefined，他就不知道要按哪个排序，就没有排序。

        如果有人知道原因，欢迎不吝赐教，万分感激。