ng-options z prostą inicjalizacją tablicy

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.

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.

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

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.

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/

<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