AngularJS 알파벳순으로 목록 항목

Question

나는 알파벳순으로 항목 목록을 정렬하는 작업을 해왔다. orderBy와 함께 ng-repeat를 사용하면 작업중인 데이터의 유형에 따라 숫자 또는 사전 순으로 정렬되는 경향이 있다는 것을 알게되었습니다. 그러나 영숫자로 정렬하지는 않습니다.

자바 스크립트 코드 :

function AppCtrl($scope) { 
     $scope.items = [ 
      {'name':'School Item 1','address':'1920'}, 
      {'name':'Work Item 2','address':'4192'}, 
      {'name':'Ad Item 5','address':'2039'}, 
      {'name':'Cool Item 45','address':'2090'}, 
      {'name':'Cool Item 50','address':'1029'}, 
      {'name':'Cool Item 100','address':'1829'}, 
      {'name':'Cool Item 400','address':'1728'} 
     ]; 
    } 

HTML 코드 : 여기

<ul ng-controller="AppCtrl"> 
     <li ng-repeat="item in items|orderBy:['name','address']"> 
      {{item.name}} {{item.address}} 
     </li> 
    </ul> 

는 바이올린에게 구입했을 때 그것을 보여줄 것 http://jsfiddle.net/roverton/PuYLS/1/

공지 사항입니다 (1) 다음 (100), 45 후 (400), (5) 그 다음 50 등.이 영숫자를 주문하고 싶습니다. AngularJS에서 어떻게 할 수 있습니까?

Answer 1

한 가지 방법은 숫자를 추출하는 함수를 사용하는 것입니다.

function nameNumberSorter(item) { 
    var numberPart = item.name.replace('NamedItem', ''); 
    return parseInt(numberPart); 
} 

그리고는 필터 약간 변경 :

<div ng-app> 
    <ul ng-controller="AppCtrl"> 
     <li ng-repeat="item in items|filter:deviceBindingFilter|orderBy:nameNumberSorter"> 
      {{item.name}} - {{item.address}} 
     </li> 
    </ul> 
</div> 

---

또는, 당신은 정렬 모델에 추가 필드를 만들 수 있습니다.

function AppCtrl($scope) { 
    $scope.items = [ 
     {'name':'NamedItem1','address':'1920', 'sortOrder': 1 }, 
     {'name':'NamedItem2','address':'4192', 'sortOrder': 2 }, 
     {'name':'NamedItem5','address':'2039', 'sortOrder': 5 }, 
     {'name':'NamedItem45','address':'2090', 'sortOrder': 45 }, 
     {'name':'NamedItem50','address':'1029', 'sortOrder': 50 }, 
     {'name':'NamedItem100','address':'1829', 'sortOrder': 100 }, 
     {'name':'NamedItem400','address':'1728', 'sortOrder': 400 } 
    ]; 
} 

그리고이 필드를 보도록 정렬을 변경하십시오.

<div ng-app> 
    <ul ng-controller="AppCtrl"> 
     <li ng-repeat="item in items|filter:deviceBindingFilter|orderBy:'sortOrder'"> 
      {{item.name}} - {{item.address}} 
     </li> 
    </ul> 
</div>