Elementy listy AngularJS alfanumerycznie - javascript, angularjs, angularjs-ng-repeat, angularjs-orderby

Pracuję nad sortowaniem listy przedmiotówalfanumerycznie. Odkryłem, że użycie ng-repeat z orderBy ma tendencję do sortowania liczbowego lub alfabetycznego w zależności od typu danych, z którymi pracuje. Nie sortuje jednak alfanumerycznie.

Kod JavaScript:

    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"}
];
}

Kod HTML:

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

Oto skrzypce http://jsfiddle.net/roverton/PuYLS/1/

Zauważ, że po zamówieniu pokaże 1, potem 100, 45, potem 400, 5, potem 50 itd. Chciałbym zamówić je alfanumerycznie. Jak mam to zrobić w AngularJS?

Odpowiedzi:

Jednym ze sposobów na to jest użycie funkcji do wyodrębnienia liczby.

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

A potem trochę zmień filtr:

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

Alternatywnie, możesz zrobić dodatkowe pole na swoim modelu do sortowania.

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

I zmień swój rodzaj, aby spojrzeć na to pole.

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