javascript - AngularJS ng-repeat orderBy 订单编号不正确

Question

我在使用 ng-repeat 时遇到问题orderBy当文本中有数字时。

样本数据:

[
   {booth: 'p1'},
   {booth: 'p2'},
   {booth: 'p3'},
   {booth: 'p4/5'},
   {booth: 'p6/7'},
   {booth: 'p8'},
   {booth: 'p9'},
   {booth: 'p10'},
   {booth: 'p11'},
   {booth: 'p12'},
   {booth: 'p13'}
]

使用 ng-repeat 时与 orderBy: 'booth'是这样列出来的:
p1、p10、p11、p13、p2 等

我知道这是预期的行为，但有谁知道我怎样才能让它按照我期望的顺序列出展位？

这将是:
p1、p2、p3、p4/5 等

我还尝试查看问题是否是因为数字不是整数但返回了相同的问题。

预先感谢您的任何帮助。

Answer 1

JavaScript 的内置字符串比较不适用于您的目的。我认为需要的是 自然排序 , 以人类的方式对字符串进行排序。我找到了一个可靠的实现 here来自博客 here .它非常全面且相当复杂，因此我不会尝试在此处解释源代码(查看博客以获取解释)。

然后，您可以为自然排序创建一个自定义过滤器并在您的 HTML 中使用，例如:

HTML

<div ng-app="myApp">
    <div ng-controller="ctrlMain">
        <div ng-repeat="item in data | naturalSort">{{item.booth}}</div>
    </div>
</div>

Javascript - 我省略了排序的实现，因为它很长并且不是由我创建的，但请查看底部的演示以查看它的实际效果。

app.filter('naturalSort',function(){
    function naturalSort (a, b) {
        // Please see the demo for this code, it is somewhat long.
    }
    return function(arrInput) {
        var arr = arrInput.sort(function(a, b) {
            return naturalSort(a.booth,b.booth);
        });
        return arr;
    }
});

下面演示中的排序实现涵盖了可以在许多情况下使用的各种可能性(日期、十六进制值、空格)(尽管对于您的示例来说可能有点矫枉过正)。

Here is a demo