AngularJS ng-repeat orderI numeri di ordinazione errati

Question

Ho riscontrato un problema con l'utilizzo dell'ordinamento ng-repeatDa quando ci sono numeri nel testo.

dati di esempio:

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

Quando si utilizza il ng-repeat con l'orderBy: 'stand' è la lista fuori come tale: p1, p10, p11, p13, p2, ect

Capisco che questo è un comportamento previsto, ma qualcuno sa come posso farlo elencare gli stand nell'ordine che mi aspetto?

Che sarebbe: P1, P2, P3, P4/5, ect

Inoltre ho provato a vedere se il problema è stato perché i numeri non erano interi, ma tornati lo stesso problema.

Grazie in anticipo per qualsiasi aiuto.

Answer 1

Il confronto di stringhe incorporato di JavaScript non funzionerà per i tuoi scopi. Penso che sia necessario un ordinamento naturale , per ordinare le stringhe come farebbe un essere umano. Ho trovato un'implementazione solida here dal blog here. È abbastanza completo e abbastanza complesso, quindi non cercherò di spiegare il codice sorgente qui (controlla il blog per spiegazioni).

È possibile quindi creare un filtro personalizzato per l'ordinamento naturale e utilizzare nel codice HTML come:

HTML

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

Javascript - ho lasciato fuori l'attuazione del genere dal momento che è lungo e non creato da me, ma controlla la demo in basso per vederlo in azione.

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

L'implementazione sorta nella demo di seguito copre varie possibilità (data, valori esadecimali, spazio bianco) che potrebbe essere utilizzato in molte situazioni (anche se può essere un po 'eccessivo per il tuo esempio).

Here is a demo