Елементи списку AngularJS - алфавітно-цифрові - javascript, angularjs, angularjs-ng-repeat, angularjs-orderby

Я працював над сортуванням списку елементівбуквено-цифровий. Я виявив, що використання ng-repeat з orderBy має тенденцію до сортування чисельно чи за алфавітом, залежно від типу даних, з якими він працює. Однак він не сортується буквено-цифрово.

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

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?

Відповіді:

Один із способів зробити це - використовувати функцію для вилучення числа.

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>