it-swarm.com.de

ng-options mit simple array init

Ich bin ein bisschen verwirrt mit Angular und ng-options.

Ich habe ein einfaches Array und möchte damit ein Select initialisieren. Aber ich möchte, dass Optionen value = label.

script.js

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

html

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

Was ich bekomme:

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

Was ich will:

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

Also habe ich versucht:

<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>

(Aber es hat nicht funktioniert.)

Bearbeiten:

Mein Formular wird extern übermittelt, weshalb ich anstelle von 0 'var1' als Wert benötige.

182
Dragu

Sie hatten es tatsächlich richtig in Ihrem dritten Versuch.

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

Ein funktionierendes Beispiel finden Sie hier: http://plnkr.co/edit/xEERH2zDQ5mPXt9qCl6k?p=preview

Der Trick ist, dass AngularJS die Schlüssel ohnehin als Zahlen von 0 bis n schreibt und beim Aktualisieren des Modells zurückübersetzt.

Infolgedessen sieht der HTML-Code falsch aus, das Modell wird jedoch bei der Auswahl eines Werts weiterhin ordnungsgemäß festgelegt. (d. h. AngularJS übersetzt '0' zurück zu 'var1')

Die Lösung von Epokk funktioniert auch, wenn Sie jedoch Daten asynchron laden, werden diese möglicherweise nicht immer korrekt aktualisiert. Die Verwendung von ngOptions wird korrekt aktualisiert, wenn sich der Bereich ändert.

298
James Davies

Sie können ng-repeat mit option wie folgt:

<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>

Wenn Sie Ihr form übermitteln, können Sie den Eingabewert verbergen.


DEMO

ng-selectedng-repeat

34
EpokK

Wenn Sie Ihre Auswahl wie folgt einrichten:

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

sie erhalten:

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

funktionierende Geige: http://jsfiddle.net/x8kCZ/15/

20
Ida N

du könntest so etwas gebrauchen

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

mit ng-selected kannst du die option vorwählen, falls myselect vorbelegt wurde.

Ich bevorzuge diese Methode trotzdem gegenüber ng-options, da ng-options nur mit Arrays funktioniert. ng-repeat funktioniert auch mit jsonartigen Objekten.

20
iPirat
<select ng-model="option" ng-options="o for o in options">

$ scope.option wird nach der Änderung gleich 'var1' sein, auch wenn Sie in generiertem HTML den Wert = "0" sehen

Plunker

10
Toolkit