AngularJS ng-lặp lại thứ tựBằng số đơn đặt hàng không chính xác

Question

Tôi đang gặp sự cố khi sử dụng thứ tự ng lặp lạiBởi khi có số trong văn bản.

mẫu dữ liệu:

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

Khi sử dụng ng-repeat với orderBy: 'gian hàng' là danh sách nó ra như vậy: p1, p10, P11, p13, p2, vv

Tôi hiểu đây là hành vi mong đợi nhưng có ai biết làm thế nào tôi có thể làm cho nó để liệt kê ra các gian hàng theo thứ tự mà tôi mong đợi?

nào sẽ là: p1, p2, p3, p4/5, vv

Tôi cũng đã cố gắng nhìn thấy nếu vấn đề này là vì những con số không phải là số nguyên nhưng lại cùng một vấn đề.

Cảm ơn bạn trước vì đã được trợ giúp.

Answer 1

So sánh chuỗi được tích hợp sẵn của JavaScript sẽ không hoạt động cho mục đích của bạn. Tôi nghĩ điều cần thiết là một kiểu tự nhiên tự nhiên, để sắp xếp các chuỗi theo cách của con người. Tôi đã tìm thấy triển khai vững chắc here từ blog here. Nó khá toàn diện và khá phức tạp nên tôi sẽ không cố gắng giải thích mã nguồn ở đây (kiểm tra blog để giải thích).

Sau đó bạn có thể tạo bộ lọc tùy chỉnh cho các loại tự nhiên và sử dụng trong HTML của bạn như:

HTML

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

Javascript - Tôi đã bỏ qua việc thực hiện của các loại vì nó dài và không được tạo ra bởi tôi, nhưng hãy kiểm tra bản demo ở phía dưới để xem nó hoạt động.

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; 
    } 
}); 

Việc triển khai sắp xếp trong demo dưới đây có thể được sử dụng trong nhiều trường hợp (mặc dù có thể hơi quá mức cho ví dụ của bạn).

Here is a demo