Question

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

我已经检查过许多stackoverflow问题，例如Angular Sorting with null objects，AngularJS orderby with empty field和AngularJS sorting a list with nulls，但在这种情况下似乎都没有。

以下是我与之合作的一个小例子：

＆＃13;

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; 
  };
  
 });

＆＃13;

<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>

＆＃13;

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

Answer 1

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

＆＃13;

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);
  };
  
 });

＆＃13;

<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>

＆＃13;

在AngularJS中排序多个列时，显示空值总是持续的

1 个答案: