5

텍스트에 숫자가있는 경우 ng-repeat orderBy를 사용하는 데 문제가 있습니다.AngularJS 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'} 
] 

해 orderBy와 NG 반복 사용 : P1, P10, P11, P13, P2, 요법

'부스'등의 목록을 밖으로 나는 이것이 예상 된 행동이라고 이해하지만 누군가 내가 예상 한 순서대로 부스를 나열하는 방법을 알 수 있습니까? 것

는 : P1, P2, P3, P4/5, 요법

또한 숫자가 정수 아니었다하지만 같은 문제가 발생했기 때문에 문제가 있다면 보는 노력했다.

도움을 주셔서 감사합니다.

+0

아직 그러나 여기에서 문제에 대한 내 대답이다. 필자는 사용자 정의 필터를 사용하여이 문제를 해결했습니다. 참고 : 피들에는 parseFloat와 슬라이스가 있습니다.이 필터는 전달하는 데이터를 기반으로 수정해야합니다. Fiddle : http://jsfiddle.net/L3HjP/3/ – creatifyme

답변

12

JavaScript의 내장 문자열 비교는 사용자의 목적에 부합하지 않습니다. 필요한 것은 인간의 식으로 문자열을 정렬하기 위해 자연 정렬입니다. 블로그 here에서 단색 구현 here을 발견했습니다. 그것은 매우 포괄적이고 상당히 복잡하므로 여기서 소스 코드를 설명하려고하지 않을 것입니다 (설명을 위해 블로그를 확인하십시오).

그런 자연의 종류에 대한 사용자 정의 필터를 만들고처럼 HTML에서 사용할 수 있습니다

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

자바 스크립트

HTML - 나는 종류의 구현을 떠 났어요 길기 때문에 나로 인해 생성되지는 않았으므로 바닥에있는 데모를 확인하여 실제 상황을 확인하십시오.

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

아래 데모 정렬 구현은 다양한 가능성 (날짜, 16 진수 값, 공백) (그것은 당신의 예를 들어 조금 잔인한 수도 있지만) 많은 상황에서 사용될 수 다룹니다. 내가 그래서 난 내 자신의 문제를 해결할 수없는 너무 새로운니까

Here is a demo

+2

굉장히 자연스러운 정렬 알고리즘입니다. – SoluableNonagon