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>
sort函数 js<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,'                                <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 | ownOrderB                            <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 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 | deName | orderBy:nodes.verse | pagination:nodes.pageNo:nodes.pageSize">                            <td><input type="checkbox" id="nodeNameCheck{{deName}}" ng-click="selectNode(info);"
ng-model="info.checked"></input>
</td>
<td>{{deName}}</td>
<td>{{deIp}}</td>
<td>{{info.fluidSpeedSize}}</td>
</tr>
</tbody>
</table>
js中表头定义：
$scope.servicesTitle = [{
"name": 'service',
"value": '服务列表'
}
];
$desTitle = [{
"name": 'nodeName',
"value": '节点名称'
}, {
"name": 'nodeIp',
"value": '节点IP'
}, {
"name": 'fluidSpeedSize',
"value": '流控参数值'
}
];
js中排序变量定义：
$scope.services = {
sort: undefined, //⽤来排序的字段
reverse: false, //⽤于排序升序降序
filteredList: []//条件过滤后的结果
};
$des = {
sort: undefined, //⽤来排序的字段
reverse: false, //⽤于排序升序降序
filteredList: []//条件过滤后的结果
};
js中ng-click排序⽅法，和排序图标显⽰
$le_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';
.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，他就不知道要按哪个排序，就没有排序。
如果有⼈知道原因，欢迎不吝赐教，万分感激。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。