如何使用NG选项排序自然？ [英] How to use natural sorting in ng-options?

问题描述

我有这样一个对象：

Object {0: 0, 1: 2, 2: 4, 3: 6, 4: 8, 5: 11, 6: 13, 7: 15, 8: 17, 9: 19, 10: 22, 11: 24, 12: 26, 13: 28, 14: 30, 15: 33, 16: 35, 17: 37, 18: 39, 19: 41, 20: 44, 21: 46, 22: 48, 23: 50, 24: 52, 25: 55, 26: 57, 27: 59, 28: 61, 29: 63, 30: 66, 31: 68, 32: 70, 33: 72, 34: 74, 35: 77, 36: 79, 37: 81, 38: 83, 39: 85, 40: 88, 41: 90, 42: 92, 43: 94, 44: 97, 45: 99, 46: 101, 47: 103, 48: 105, 49: 108, 50: 110, 51: 112, 52: 114, 53: 116, 54: 119, 55: 121, 56: 123, 57: 125, 58: 127, 59: 130, 60: 132, 61: 134, 62: 136, 63: 138, 64: 141, 65: 143, 66: 145, 67: 147, 68: 149, 69: 152, 70: 154, 71: 156, 72: 158, 73: 160, 74: 163, 75: 165, 76: 167, 77: 169, 78: 171, 79: 174, 80: 176, 81: 178, 82: 180, 83: 182, 84: 185, 85: 187, 86: 189, 87: 191, 88: 194, 89: 196, 90: 198, 91: 200, 92: 202, 93: 205, 94: 207, 95: 209, 96: 211, 97: 213, 98: 216, 99: 218…}

和我使用它在选择框中NG选项。但我得到了他们在错误的顺序呈现：

and I'm using it in ng-options for select box. But I got them rendered in wrong order:


1
10
100
101
...
11
110


我怎么能进行排序在选择框中为整数值？在常见的，我应该用自然排序的功能。事情是这样的 https://github.com/overset/javascript-自然排序/ BLOB /主/ naturalSort.js 的但是我只有数字在此列表中，也许有在我的情况simplier的解决方案？

How can I sort values in select box as integers? In common, I should use natural sorting function. Something like this https://github.com/overset/javascript-natural-sort/blob/master/naturalSort.js However I have only numbers in this list and maybe there are simplier solution in my case?

也许是在某些方面可以使角治疗对象密钥和整数？

Maybe it is possible in some way to make angular treat objects keys and integers?

下面是plunkr： http://plnkr.co/edit/mUBM0egiS8pl8odaWQQY？ p = preVIEW

Here is the plunkr: http://plnkr.co/edit/mUBM0egiS8pl8odaWQQY?p=preview

推荐答案

您必须将列表转换为数组，以保证排序顺序。 <一href=\"http://stackoverflow.com/questions/5525795/does-javascript-guarantee-object-property-order\">You不能保证排序顺序使用对象的HashMap，它只是不这样的。

You have to convert the list to an array to guarantee sort order. You cannot guarantee sort order using an Object hashmap, it just doesn't work that way.

最好的办法 - 性能明智的 - 是将对象转换控制器：

The best bet — performance wise — is to convert the object in the controller:

var values = {...}
$scope.selectOptions = [];
angular.forEach(values, function(value, key) {
    $scope.selectOptions.push({
        key: value,
        label: key
    });
});
$scope.selectOptions.sort(mySortingFunction);

在您的视图：

<select model="selected" ng-options="opt.key as opt.label for opt in selectOptions"></select>

这将创建一个选择，其中标签是原始对象的属性键，值是原始对象的属性值。

This will create a select where the labels are the original object's property keys and the values are the original object's property values.

如果你想在飞行发生重排，你可以做到这一点作为一个过滤器，但要对ppared潜在的性能问题$ P $。

If you want the rearranging to occur on the fly, you can do it as a filter, but be prepared for potential performance issues.

app.filter("naturalSortedObject", function() {
    return function(obj) {
        var result = [];
        angular.forEach(obj, function(value, key) {
            result.push({
                key: value,
                label: key
            });
        });
        result.sort(mySortingFunction);
        return result;
    }
});

然后使用它是这样的：

Then use it like this:

<select model="selected"
    ng-options="opt.key as opt.label for opt in selectOptions | naturalSortedObject"></select>

此外，您已经有了一个自然的排序算法，但如果你想要一个一个已经设计为的用作角滤波器放大器;模块，我写了之一。它集成了pretty良好，并能在高速缓存的方式使用，使其更快一点。

Also, you already have a natural sorting algorithm, but if you want one that's already designed to be used as an Angular filter & module, I wrote one. It integrates pretty well, and can be used in a caching manner to make it a little faster.

这篇关于如何使用NG选项排序自然？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！