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,ect

我理解这是预期的行为,但有谁知道我怎么能按照我期望的顺序列出展位？

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

我也试过看看问题是因为数字不是整数而是返回了同样的问题.

预先感谢您的任何帮助.

Answer 1

JavaScript的内置字符串比较不适用于您的目的.我认为所需要的是一种自然的排序,按照人类的方式对字符串进行排序.我发现了一个坚实的实现这里从博客这里.它非常全面且相当复杂,所以我不会在这里解释源代码(请查看博客的解释).

然后,您可以为自然排序创建自定义过滤器,并在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;
    }
});

下面演示中的排序实现涵盖了可以在许多情况下使用的各种可能性(日期,十六进制值,空白)(尽管对于您的示例可能有点过分).

这是一个演示