ng-options z prostą inicjalizacją tablicy

187

Jestem trochę zmieszany z Angularem i ng-options.

Mam prostą tablicę i chcę za jej pomocą zainicjować selekcję. Ale chcę, aby ta opcja wartość = etykieta.

script.js

$scope.options = ['var1', 'var2', 'var3'];

HTML

<select ng-model="myselect" ng-options="o for o in options"></select>

Co dostaję:

<option value="0">var1</option>
<option value="1">var2</option>
<option value="2">var3</option>

Czego chcę:

<option value="var1">var1</option>
<option value="var2">var2</option>
<option value="var3">var3</option>

Więc próbowałem:

<select ng-model="myselect2" ng-init=0 ng-options="options[k] as v for (k,v) in options"></select>

<select ng-model="myselect3" ng-init=0 ng-options="b as b for b in options"></select>

(Ale to nie działało.)

Edytować:

Mój formularz jest przesyłany zewnętrznie, dlatego potrzebuję „var1” jako wartości zamiast 0.

Dragu
źródło

Odpowiedzi:

304

Naprawdę miałeś to poprawnie przy trzeciej próbie.

 <select ng-model="myselect" ng-options="o as o for o in options"></select>

Zobacz działający przykład tutaj: http://plnkr.co/edit/xEERH2zDQ5mPXt9qCl6k?p=preview

Sztuka polega na tym, że AngularJS i tak zapisuje klucze jako liczby od 0 do n, i tłumaczy z powrotem podczas aktualizacji modelu.

W rezultacie kod HTML będzie wyglądał niepoprawnie, ale model będzie nadal poprawnie ustawiony przy wyborze wartości. (tzn. AngularJS przetłumaczy „0” z powrotem na „var1”)

Rozwiązanie firmy Epokk również działa, jednak jeśli ładujesz dane asynchronicznie, może się okazać, że nie zawsze aktualizuje się poprawnie. Korzystanie z ngOptions będzie poprawnie odświeżane po zmianie zakresu.

James Davies
źródło
1
Nie masz tematu. Nie zrozumiałeś instrukcji. On chce valuew swoim select.
EpokK
10
Zrozumiałem instrukcje, jednak jest całkiem prawdopodobne, że jego intencją jest powiązanie „wartości” z modelem i nie rozumie, co się dzieje z powodu sposobu, w jaki AngularJs renderuje tag.
James Davies,
3
To działa, jeśli się wybrać jego wartość z kanciasty, ale w moim przypadku (czyli klasyczny złożyć formularz), wartości będą 0,1,2,3, nie zm1, var2, VAR3
Dragu
1
Zakładałem, że jesteś powiązany z modelem, ale jeśli po prostu używasz AngularJS do renderowania formularza przesłanego zewnętrznie do kątownika, skorzystaj z rozwiązania EpokK.
James Davies,
66
Czy to tylko ja, czy jest to najbardziej skomplikowana i niejasna składnia w historii?
fool4jesus,
35

Możesz użyć ng-repeatw optionten sposób:

<form>
    <select ng-model="yourSelect" 
        ng-options="option as option for option in ['var1', 'var2', 'var3']"
        ng-init="yourSelect='var1'"></select>
    <input type="hidden" name="yourSelect" value="{{yourSelect}}" />
</form>

Po przesłaniu formmożesz ukryć wartość danych wejściowych.


DEMO

Wybrane przez ng powtórzenie

EpokK
źródło
Jeśli zmniejszyłeś moją odpowiedź, sprawdź moje nowe rozwiązanie.
EpokK,
21

możesz użyć czegoś takiego

<select ng-model="myselect">
    <option ng-repeat="o in options" ng-selected="{{o==myselect}}" value="{{o}}">
        {{o}}
    </option>
</select>

używając ng-selected wybrałeś opcję na wypadek, gdyby myselect było wstępnie wypełnione.

W każdym razie wolę tę metodę od ng-options, ponieważ ng-options działa tylko z tablicami. ng-repeat działa również z obiektami podobnymi do jsona.

iPirat
źródło
1
ng-optionswspółpracuje również ze źródłami danych obiektowych. Zobacz docs.quarejs.org/api/ng/directive/select
Charlie Schliesser
1
Chociaż inni dali obejścia, to rozwiązanie jest zdecydowanie najbardziej eleganckie i zbliżone do starego stylu HTML, działa zarówno z wiązaniem modelu kątowego, jak i formą podrzędną. Dzięki!
Fadi Chamieh,
4
ng-selected nie potrzebuje kierownicy, ponieważ jest to dyrektywa kątowa. Doskonałe rozwiązanie
Kasey Speakman,
20

Jeśli skonfigurujesz swój wybór w następujący sposób:

<select ng-model="myselect" ng-options="b for b in options track by b"></select>

dostaniesz:

<option value="var1">var1</option>
<option value="var2">var2</option>
<option value="var3">var3</option>

działające skrzypce: http://jsfiddle.net/x8kCZ/15/

Ida N.
źródło
1
To rozwiązanie było jedynym, które działało dla mnie przy wybieraniu wartości początkowej w tablicy ciągów.
Włącz
tak, to powinna być odpowiedź, utwór autorstwa jest dla mnie magiczny.
Gurnard
najmniej spodziewałem się po zastosowaniu powyższych rozwiązań, ale było to łatwe wyjście
sac Dahal
10
<select ng-model="option" ng-options="o for o in options">

$ scope.option po zmianie będzie równy 'var1', nawet zobaczysz wartość = "0" w wygenerowanym HTML

plunker

zestaw narzędzi
źródło