2013-08-15 17 views
23

Próbowałem użyć ng-options, aby wyświetlić tablicę czcionek w wybranym alfabetycznie uporządkowanym sortowaniu według wartości elementów w tablicy.Tablica sortowania AngularJS ngOptions

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', ... ]; 

Próbowałem zmieniając wartość w orderBy i innych rzeczy. Przeczytałem documentation i wszystkie komentarze.

Czego mi brakuje? Czy to ma działać tylko na obiektach?

Odpowiedz

47

To co trzeba zrobić:

<select ng-model="selected" ng-options="font for font in webfonts | orderBy:'toString()' " name="fonts"> 
  1. Trzeba dodać NG-model poprawnie wprowadzić wiążące prace do listy ciągów.
  2. Możesz użyć toString() do sortowania, jeśli dane wejściowe zawierają listę ciągów. Ponieważ wyrażenie orderBy może być funkcją Gettera. Wynik tej funkcji zostanie posortowany przy użyciu operatora <, =,>.

Demo

+0

To działa! Dzięki! ale dlaczego to działa? Jestem zdezorientowany. –

+1

@ChrisB Ponieważ 'toString()' jest dostępne w dowolnym obiekcie 'string' w prototypie. To rzeczywiście jest sztuczka i zasługuje na to, aby pamiętać na zawsze. – zsong

+2

Działa, ponieważ '.toString()' jest właściwością ciągu znaków w tablicy 'webfonts', a' orderBy' oczekuje właściwości podanego obiektu ('font'). W tym samym czasie 'toString()' zwraca wartość 'font', która jest dokładnie tym, co chcę zamówić. Czy to jest poprawne? Czy rozumiem to poprawnie? –

3

Jak określa dokumentacja, argument łańcuchowy dotyczy właściwości obiektu, a nie prymitywów. Myślę, że tak elementarne, jak się wydaje, musisz utworzyć funkcję w zakresie, która po prostu zwraca argument i przekazać ją do orderBy.

Zobacz jsFiddle!

+0

To działa! Dzięki! ale dlaczego to działa? –

+0

Zgodnie z dokumentacją można przekazać nazwę funkcji, której wynik jest używany jako wartość porównawcza! –

Powiązane problemy