AngularJS orderby与空字段

Question

我正在订购我的数据并且其工作正常,除了一些字段为空或没有价值.订购时,这些空字段首先出现.例如,在订购数字时,我们会在获得"0"值之前得到一个巨大的空列表.

我这样做是这样的:

ng-click="predicate = 'name'; reverse=!reverse"

和

ng-repeat="name in names | orderBy:predicate:reverse"

JSFiddle:http://jsfiddle.net/JZuCX/1/

有一种简单优雅的方法来解决这个问题吗？无论如何,我希望空场能够持久.

Answer 1

如何排序字符串:

item in (items|orderBy:['!name', 'name'])

的优点(除了是更简洁)是它排序null&undefined与空白字符串.

在我的情况下,我希望顶部的空白和空值和未定义(默认情况下为nulls和undefineds排序到底部),所以我使用:

item in (items|orderBy:['!!name', 'name'])

Answer 2

我写了一个过滤器,它从有序数组中获取空​​名称的项目,并将它们放在最后:

<li ng-repeat="item in (items|orderBy:'name'|emptyToEnd:'name')">{{item.name}}</li>

代码可能如下所示:

.filter("emptyToEnd", function () {
    return function (array, key) {
        if(!angular.isArray(array)) return;
        var present = array.filter(function (item) {
            return item[key];
        });
        var empty = array.filter(function (item) {
            return !item[key]
        });
        return present.concat(empty);
    };
});

工作实例.

顺便说一下,你的小提琴不包含任何相关的代码.你使用了错误的链接吗？

更新2: 你的过滤器的小提琴.

Answer 3

在这里!:d

此解决方案扩展了 angularJs orderBy过滤器的正常功能,以获取第三个参数,指定是否反转null和undefined值的正常排序.它观察它传递的属性名称(不仅仅是一个),并且不会像其他一些解决方案那样迭代项目.它的使用方式如下:

<li ng-repeat="item in (items|orderBy:'name':false:true)">{{item.name}}</li>

我找到了一堆线程,有些不是直接的orderBy,并且编译了他们的技术加上我自己的几个部分:

angular.module('lib')
.config(['$provide', function ($provide) {
    $provide.decorator('orderByFilter', ['$delegate', '$parse', function ($delegate, $parse) {
        return function () {
            var predicates = arguments[1];
            var invertEmpties = arguments[3];
            if (angular.isDefined(invertEmpties)) {
                if (!angular.isArray(predicates)) {
                    predicates = [predicates];
                }
                var newPredicates = [];
                angular.forEach(predicates, function (predicate) {
                    if (angular.isString(predicate)) {
                        var trimmed = predicate;
                        if (trimmed.charAt(0) == '-') {
                            trimmed = trimmed.slice(1);
                        }
                        var keyFn = $parse(trimmed);
                        newPredicates.push(function (item) {
                            var value = keyFn(item);
                            return (angular.isDefined(value) && value != null) == invertEmpties;
                        })
                    }
                    newPredicates.push(predicate);
                });
                predicates = newPredicates;
            }
            return $delegate(arguments[0], predicates, arguments[2]);
        }
    }])
}]);

要逐字使用此代码,请将"lib"指定为应用程序的依赖项.

致记:

• $parse
• [nullSorter].concat(originalPredicates)
• decorator 图案