AngularJS listet Elemente alphanumerisch auf - javascript, angularjs, angularjs-ng-repeat, angularjs-orderby

Ich habe daran gearbeitet, eine Liste von Gegenständen zu sortierenalphanumerisch. Ich habe festgestellt, dass die Verwendung von ng-repeat mit orderBy dazu neigt, entweder numerisch oder alphabetisch zu sortieren, abhängig von der Art der Daten, mit denen es arbeitet. Es wird jedoch nicht alphanumerisch sortiert.

JavaScript-Code:

    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 Quelltext:

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

Hier ist die Geige http://jsfiddle.net/roverton/PuYLS/1/

Beachten Sie, dass bei der Bestellung 1, 100, 45, 400, 5, 50 usw. angezeigt werden. Ich möchte diese alphanumerisch bestellen. Wie würde ich das in AngularJS machen?

Antworten:

Eine Möglichkeit, dies zu tun, besteht darin, eine Funktion zum Extrahieren der Nummer zu verwenden.

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

Und ändern Sie dann Ihren Filter ein wenig:

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

Alternativekönnen Sie ein zusätzliches Feld für die Sortierung auf Ihrem Modell erstellen.

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

Und ändern Sie Ihre Sortierung, um sich dieses Feld anzusehen.

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