web-dev-qa-db-fra.com

Tableau de tri des options AngularJS ng

J'ai essayé d'utiliser ng-options pour afficher un tableau de polices dans une sélection triées alphabétiquement selon la valeur des éléments du tableau.

[~ # ~] html [~ # ~] 

<select ng-options="font for font in webfonts | orderBy:'font'" name="fonts">
     <option value="">Choose a font</option>
</select>

[~ # ~] js [~ # ~] 

$scope.webfonts = [ 
        'Abel', 'Crafty Girls' , 'Lato' , 'Average',
        'Corben', 'Quicksand', ... ];

J'ai essayé de changer la valeur dans orderBy et d'autres choses. J'ai lu le documentation et tous les commentaires.

Qu'est-ce que je rate? Est-ce censé fonctionner uniquement sur des objets?

angularjsng-options
25
Chris Bier

Voici ce que vous devez faire:

<select ng-model="selected" ng-options="font for font in webfonts | orderBy:'toString()' " name="fonts">
  1. Vous devez ajouter ng-model pour que la liaison fonctionne correctement pour une liste de chaînes.
  2. Vous pouvez utiliser toString() pour trier si l'entrée contient une liste de chaînes. Puisque l'expression de orderBy peut être une fonction Getter. Le résultat de cette fonction sera trié à l'aide de l'opérateur <, =,>.

Demo

50
zs2020

Comme la documentation le spécifie, l'argument chaîne est pour les propriétés des objets, pas pour les primitives. Je pense que, aussi élémentaire que cela puisse paraître, vous devez créer une fonction sur la portée qui renvoie simplement l'argument et le transmettre à orderBy.

Voir jsFiddle !

3
Steve Klösters