使用null对象进行角度排序

时间:2014-09-04 09:34:20

标签: angularjs sorting

当我按ASC排序

时,我需要在顶部记录带有空值的记录
<tr ng-repeat="footballer in footballers=(footballers | orderBy:predicate)">
predicate : ['team.name','id]

有些足球运动员没有球队,所以球队object == nullteam.name==null,我需要让他们在顶部

我想重写sort函数,但我需要保存谓词

4 个答案:

答案 0 :(得分:8)

你可以在你的控制器中使用这样的东西:

$scope.nullsToTop = function(obj) {
  return (angular.isDefined(obj.team) ? 0 : -1);
};

在HTML上:

<tr ng-repeat="footballer in footballers | orderBy:[nullsToTop].concat(predicate)">

这样您就可以单独维护谓词。只需在orderBy表达式中连接nullsToTop函数即可先运行它。

Plunker

答案 1 :(得分:1)

在控制器中创建一个函数,该函数将作为参数接收实体,并返回['team.name','id]或[]或其他值,这将有助于将不可排序的元素推送到顶部/底部清单。

编辑(示例)

HTML:

<li ng-repeat="item in items | orderBy:getItemOrder track by $index">...

AngularJS Ctrl:

$scope.getItemOrder = function (entity) {
  if (entity.id === null || .... === null) {
    return 0;
  }

  return ['team.name','id];
}

答案 2 :(得分:1)

我能够通过返回&#39; +&#39;来做到这一点。或者&#39; - &#39;如果值为null,则接近于bmleite所做的但更多地包含在函数本身中。

<强> 1。根据排序顺序(asc或desc)创建一个向空值添加+或a的函数,以便它们始终保持在顶部或底部

    function compareAndExcludeNull(element){
        var compareWith = $scope.order.propertyName; // in your case that's 'predicate'

        var operatorToBottom = $scope.order.reverse ? '+' : '-'; // If decending then consider the null values as smallest, if ascending then consider them biggest
        var operatorToTop = $scope.order.reverse ? '-' : '+';

        if(element[compareWith] == null){
            return operatorToTop;
        } else {
            return operatorToBottom+element[compareWith];
        }
    }

如果你想在排序数组的底部有空值,那么只需将operatorToTopoperatorToBottom切换,反之亦然,即可获得:

    function compareAndExcludeNull(element){
        var compareWith = $scope.order.propertyName; // in your case that's '

        var operatorToBottom = $scope.order.reverse ? '+' : '-'; // If decending then consider the null values as smallest, if ascending then consider them biggest
        var operatorToTop = $scope.order.reverse ? '-' : '+';

        if(element[compareWith] == null){
            return operatorToBottom;
        } else {
            return operatorToTop+element[compareWith];
        }
    }

<强> 2。调用该函数并传递您要排序的数组

使用Javascript:

在我的情况下,我从HTML调用此函数并传递不同的propertyName,具体取决于用户排序的列,在您的情况下,您只需要传递'predicate'作为propertyName

    $scope.order.sortBy = function(propertyName){
        $scope.order.reverse = (propertyName !== null && $scope.order.propertyName === propertyName) ? !$scope.order.reverse : false;
        $scope.order.propertyName = propertyName;
        $scope.resources = $filter('orderBy')($scope.resources,compareAndExcludeNull,$scope.order.reverse);
    };

HTML:

<div>
    <span ng-if="showKeywords" class="label label-info" ng-click="order.sortBy('keyword')" style="margin-right: 5px">
        Order by Keywords
        <span ng-if="order.propertyName=='keyword'" class="glyphicon glyphicon-triangle-{{order.reverse? 'bottom' : 'top'}}">
        </span>
    </span>
    <span ng-if="showWebsites" class="label label-info" ng-click="order.sortBy('res_title')">
        Order by Website
        <span ng-if="order.propertyName=='res_title'" class="glyphicon glyphicon-triangle-{{order.reverse? 'bottom' : 'top'}}">
        </span>
    </span>
</div>

答案 3 :(得分:1)

我知道这是一篇很老的帖子,但有更好的方法可以做到这一点,无法在任何地方看到它。

&#13;
&#13;
var myApp = angular.module('myApp', []);

myApp.controller('myCtrl', ["$scope", function($scope){
  $scope.footballers = [
        {id: 0, qt: 13},
        {id: 1, qt: 2},
        {id: 2, qt: 124},
        {id: 3, qt: 12125},
        {id: null , qt: 122},
        {id: 4, qt: -124},
        {id: 5, qt: -5235},
        {id: 6, qt: 43},
        ]
}]) 
&#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.9/angular.min.js"></script>


<div ng-app="myApp" ng-controller="myCtrl">
<div ng-repeat="footballer in footballers | orderBy:['id==null || id']">
    {{footballer.id}}, {{footballer.qt}}
</div>
</div>
&#13;
&#13;
&#13;

也可以使用它来显示&#39; id&#39;具有任何特定价值的其他人