Показывать нулевые значения всегда в последнюю очередь при сортировке нескольких столбцов в AngularJS

0

Я работаю со столом, который имеет несколько упорядочиваемых столбцов. Столбцы можно упорядочить как по ASC, так и по DESC. Некоторые столбцы содержат строки и некоторые числа. Проблема в том, что мои данные содержат много нулевых значений. Поэтому при сортировке (ASC со строками или DESC с числами) я сначала получаю длинный список нулей, а затем вижу фактические значения внизу. Вот почему я ищу способ поставить нулевые значения всегда внизу.

Я уже проверил множество вопросов, связанных с stackoverflow, таких как Угловая сортировка с нулевыми объектами, AngularJS orderby с пустым полем и AngularJS, сортирующий список с нулями, но ни один из них, похоже, не работает в этом случае.

Вот небольшой пример того, с чем я работаю:

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>

Надеюсь, что ты можешь помочь! Большое спасибо!

  • 0
    Пожалуйста, укажите любой код, в котором вы пытались это сделать. Потому что, насколько я могу судить, вам придется написать собственный фильтр orderyBy для решения проблемы, с которой вы столкнулись.
  • 0
    Я привел один пример того, что я пытался сделать!
Теги:
sorting
angularjs-orderby

1 ответ

0

Это то, что я пробовал, но здесь по крайней мере одна проблема заключается в том, что 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>

Ещё вопросы

Сообщество Overcoder
Наверх
Меню