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,他就不知道要按哪个排序,就没有排序。
如果有人知道原因,欢迎不吝赐教,万分感激。