Angular JS - Filter basierend auf der Nummer enthält

Question

Ich bin neu in eckigen js. Ich habe Array wie:

$scope.experience_list = ['6-7','0-1','4-5','2-3','8-10','10+', 'na']; 

ich dieses Array von Ajax-Aufruf immer bin. Der Wert des Arrays wird also in beliebiger Reihenfolge angezeigt.

Ich verwende ng-repeat dieses Array

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> 
 
<div ng-app=""> 
 
<ul ng-init="experience_list = ['6-7','0-1','4-5','2-3','8-10','10+', 'na']"> 
 
    <li ng-repeat="experience in experience_list | orderBy:'toString()' track by $index"> 
 
    <a href="javascript:void(0)"><i class="fa fa-square-o" aria-hidden="true"></i> <span ng-if="experience == 'na'">Unknown</span> <span ng-if="experience != 'na'">{{experience}} years</span></a> 
 
</li> 
 
</ul> 
 
</div>

Es gibt mir als

0-1 years 
10+ years 
2-3 years 
4-5 years 
6-7 years 
8-10 years 
Unknown 

Aber ich will als Ergebnis anzuzeigen:

0-1 years  
2-3 years 
4-5 years 
6-7 years 
8-10 years 
10+ years 
Unknown 

Jeder Vorschlag oder Hilfe wird geschätzt.

Answer 1

Wenn Sie das nur tun

ng-repeat="experience in experience_list track by $index" 

Sie bekommen rechten Ausgang

ein Hier ist mehr Ansatz

var a = ['0-1','2-3','4-5','6-7','8-10','10+', 'na'] 
$scope.experience_list = a.map(function(obj){ 
    return{ 
     order : obj.split('-')[0] || obj, 
     real : obj 
    }; 
}); 

html 

<ul> 
    <li ng-repeat="experience in experience_list | orderBy:-'order'"> 
    <a href="javascript:void(0)"><i class="fa fa-square-o" aria-hidden="true"></i> <span ng-if="experience == 'na'">Unknown</span> <span ng-if="experience != 'na'">{{experience.real}} years</span></a> 
    </li> 
</ul> 

nur versuchen, das gleiche Format zu verwenden, wenn neue Werte

Answer 2

AUSPROBIEREN zu löschen und drücken:

<li ng-repeat="experience in experience_list | orderBy:$index track by $index"> 

Answer 3

wenn Sie die Funktion ausführen wollen, rufen Sie jede Funktion nur $ index in ihr, indem. Und mit $ index extrahiere den Wert aus dem Array in der Funktion.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> 
 
<div ng-app=""> 
 
<ul ng-init="experience_list = ['0-1','2-3','4-5','6-7','8-10','10+', 'na']"> 
 
    <li ng-repeat="experience in experience_list"> 
 
    <a href="javascript:void(0)"><i class="fa fa-square-o" aria-hidden="true"></i> <span ng-if="experience == 'na'">Unknown</span> <span ng-if="experience != 'na'">{{experience}} years</span></a> 
 
</li> 
 
</ul> 
 
</div>

Answer 4

fand ich Lösung. Es hat mir geholfen. Sie müssen keinen benutzerdefinierten Filter dafür erstellen.

für weitere Informationen Intl.Collator

einfach es sortieren,

$scope.experience_list = ['6-7','0-1','4-5','2-3','8-10','10+', 'na']; 
var collator = new Intl.Collator(undefined, {numeric: true, sensitivity: 'base'}); 
$scope.experience_list.sort(collator.compare);