AngularJS ng-WiederholungsreihenfolgeBei Bestellungen von Nummern falsch

Question

Ich habe ein Problem mit der Verwendung der ng-repeat-Reihenfolge, wenn Zahlen im Text vorhanden sind.

Beispieldaten:

[ 
    {booth: 'p1'}, 
    {booth: 'p2'}, 
    {booth: 'p3'}, 
    {booth: 'p4/5'}, 
    {booth: 'p6/7'}, 
    {booth: 'p8'}, 
    {booth: 'p9'}, 
    {booth: 'p10'}, 
    {booth: 'p11'}, 
    {booth: 'p12'}, 
    {booth: 'p13'} 
] 

Wenn es mit dem orderBy den ng-repeat: 'Stand' ist es Liste als solche aus: p1, p10, p11, p13, p2, ect

Ich verstehe, dass dies erwartetes Verhalten ist, aber weiß jemand, wie ich es bekommen kann, um die Stände in der Reihenfolge aufzulisten, die ich erwarte?

Welche wäre: P1, P2, P3, P4/5, ect

Ich habe auch versucht war, ob das Problem zu sehen, weil die Zahlen nicht ganze Zahlen waren aber das gleiche Problem wieder.

Vielen Dank im Voraus für jede Hilfe.

Answer 1

Der integrierte JavaScript-String-Vergleich funktioniert nicht für Ihre Zwecke. Ich denke, was benötigt wird, ist eine natürliche Art, um die Zeichenfolgen zu sortieren, wie ein Mensch würde. Ich fand eine solide Implementierung here aus dem Blog here. Es ist ziemlich umfassend und ziemlich komplex, daher werde ich hier nicht versuchen, den Quellcode zu erklären (siehe den Blog zur Erklärung).

Anschließend können Sie einen benutzerdefinierten Filter für die natürliche Art erstellen und in Ihren HTML verwenden wie:

HTML

<div ng-app="myApp"> 
    <div ng-controller="ctrlMain"> 
     <div ng-repeat="item in data | naturalSort">{{item.booth}}</div> 
    </div> 
</div> 

Javascript - ich die Umsetzung der Art ausgelassen haben da es lang ist und nicht von mir erstellt wurde, aber schau dir das Demo unten an, um es in Aktion zu sehen.

app.filter('naturalSort',function(){ 
    function naturalSort (a, b) { 
     // Please see the demo for this code, it is somewhat long. 
    } 
    return function(arrInput) { 
     var arr = arrInput.sort(function(a, b) { 
      return naturalSort(a.booth,b.booth); 
     }); 
     return arr; 
    } 
}); 

Die Sortier Implementierung in der Demo unter umfasst verschiedene Möglichkeiten (Datum, Hex-Werte, Leerzeichen), die in vielen Situationen verwendet werden könnte (obwohl es ein wenig übertrieben für Ihr Beispiel sein kann).

Here is a demo