在AngularJS中对多列进行排序时始终显示空值答案

【问题标题】：Show null values always last when sorting several columns in AngularJS在AngularJS中对多列进行排序时始终显示空值
【发布时间】：2016-08-17 10:45:54
【问题描述】：

我正在处理一个包含多个可排序列的表。列可以以 ASC 和 DESC 方式排序。一些列包含字符串和一些数字。问题是，我的数据包含很多空值。因此，在排序时（使用字符串的 ASC 或使用数字的 DESC）我首先得到一长串空值，然后在底部查看实际值。这就是为什么我正在寻找一种将空值始终放在底部的方法。

我已经检查了许多 stackoverflow 问题，例如 Angular Sorting with null objects、AngularJS orderby with empty field 和 AngularJS sorting a list with nulls，但这些似乎都不适用于这种情况。

这是我正在使用的一个小例子：

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.result = [ {
        "value11": 17,
        "value12": 34522342,
        "value2": "a",
        "value3": 4
    },
  {
        "value11": 17,
        "value12": 23453345,
        "value2": "c",
        "value3": null
    },
  {
        "value11": 16,
        "value12": 43553234,
        "value2": null,
        "value3": null
    },
  {
        "value11": 17,
        "value12": 23546324,
        "value2": null,
        "value3": 2
    }
];

$scope.sortType = ['value11', 'value12'];

$scope.sortReverse  = false; 

$scope.sortableClass= function(sortColumn){
    var thClass = ['sortable']; 
    var direction = '';
     //if the parameter is name, the sortColumn parameter will be the value1.1 value1.2 array
     if(sortColumn=="name"){
      sortColumn = ['value11', 'value12'];
    }

    //toString is to account for ["value1.1", "value1.2"] array comparison
    if(sortColumn.toString() == $scope.sortType.toString()){
      direction = $scope.sortReverse ? 'asc' : 'desc';
      thClass.push('selectedColumn');
      thClass.push(direction);
    }
    
    return thClass;
  }
  
  $scope.sortTable = function(sortColumn) {
    if(sortColumn == "name"){
      $scope.sortType=['value11', 'value12'];
    } else{
      $scope.sortType=sortColumn;  
    }
    $scope.sortReverse= !$scope.sortReverse; 
  };
  
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
	<table>
		<thead class="ng-scope">
			<tr>
				<th ng-class="sortableClass('name')">
					<a href="#" ng-click="sortTable('name')">Column1</a>
				</th>
				<th ng-class="sortableClass('name')">
					<a href="#" ng-click="sortTable('value2')">Column2</a>
				</th>
				<th ng-class="sortableClass('name')">
					<a href="#" ng-click="sortTable('value3')">Column3</a>
				</th> 
			</tr>
		</thead>
		<tbody>
			<tr ng-repeat="n in result | orderBy:sortType:sortReverse">
				<td data-title="Value1.1 and value1.2">{{n.value11}}:{{n.value12}}</td>
				<td data-title="Value2">{{n.value2}}</td>
				<td data-title="Value3">{{n.value3}}</td>
			</tr>
		</tbody>
	</table>
</div>

希望能帮到你！非常感谢！

【问题讨论】：

请输入您尝试过的任何代码。因为据我所知，您将不得不编写自定义 orderyBy 过滤器来解决您遇到的问题。
我现在举一个我一直在尝试做的例子！

标签： angularjs sorting angularjs-orderby

【解决方案1】：

这是我尝试过的，但这里至少有一个问题是 obj[$scope.sortType] 未定义。希望这有助于解决问题。

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.result = [ {
        "value11": 17,
        "value12": 34522342,
        "value2": "a",
        "value3": 4
    },
  {
        "value11": 17,
        "value12": 23453345,
        "value2": "c",
        "value3": null
    },
  {
        "value11": 16,
        "value12": 43553234,
        "value2": null,
        "value3": null
    },
  {
        "value11": 17,
        "value12": 23546324,
        "value2": null,
        "value3": 2
    }
];

$scope.sortType = ['value11', 'value12'];

$scope.sortReverse  = false; 

$scope.sortableClass= function(sortColumn){
    var thClass = ['sortable']; 
    var direction = '';
     //if the parameter is name, the sortColumn parameter will be the value1.1 value1.2 array
     if(sortColumn=="name"){
      sortColumn = ['value11', 'value12'];
    }

    //toString is to account for ["value1.1", "value1.2"] array comparison
    if(sortColumn.toString() == $scope.sortType.toString()){
      direction = $scope.sortReverse ? 'asc' : 'desc';
      thClass.push('selectedColumn');
      thClass.push(direction);
    }
    
    return thClass;
  }
  
  $scope.sortTable = function(sortColumn) {
    if(sortColumn == "name"){
      $scope.sortType=['value11', 'value12'];
    } else{
      $scope.sortType=sortColumn;  
    }
    $scope.sortReverse= !$scope.sortReverse; 
  };
  
   $scope.nullsToBottom = function(obj) {
    return (angular.isDefined(obj[$scope.sortType]) ? -1 : 0);
  };
  
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
	<table>
		<thead class="ng-scope">
			<tr>
				<th ng-class="sortableClass('name')">
					<a href="#" ng-click="sortTable('name')">Column1</a>
				</th>
				<th ng-class="sortableClass('name')">
					<a href="#" ng-click="sortTable('value2')">Column2</a>
				</th>
				<th ng-class="sortableClass('name')">
					<a href="#" ng-click="sortTable('value3')">Column3</a>
				</th> 
			</tr>
		</thead>
		<tbody>
			<tr ng-repeat="n in result | orderBy:[nullsToBottom].concat(sortType):sortReverse">
				<td data-title="Value1.1 and value1.2">{{n.value11}}:{{n.value12}}</td>
				<td data-title="Value2">{{n.value2}}</td>
				<td data-title="Value3">{{n.value3}}</td>
			</tr>
		</tbody>
	</table>
</div>

【讨论】：