ng-Optionen mit einfachem Array init

186

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

Ich habe ein einfaches Array und möchte damit eine Auswahl starten. 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 möchte:

<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 gesendet, weshalb ich anstelle von 0 'var1' als Wert benötige.

angularjs ng-grid ng-options

— Dragu
quelle

303

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

 <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, aber das Modell wird bei der Auswahl eines Werts weiterhin richtig eingestellt. (dh AngularJS übersetzt '0' zurück in 'var1')

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

— James Davies
quelle

1

Du bist nicht zum Thema. Du hast die Anweisungen nicht verstanden. Er will valuein seinem select.

— EpokK

10

Ich habe die Anweisungen verstanden, aber es ist sehr wahrscheinlich, dass er beabsichtigt, den 'Wert' an das Modell zu binden, und er missversteht, was aufgrund der Art und Weise passiert, wie AngularJs das Tag rendert.

— James Davies

3

Es funktioniert, wenn Sie den Wert von select mit eckig erhalten, aber in meinem Fall (dh klassisches Übermittlungsformular) sind die Werte 0,1,2,3, nicht var1, var2, var3

— Dragu

1

Ich nahm an, dass Sie an das Modell gebunden waren, aber wenn Sie AngularJS einfach zum Rendern eines Formulars verwenden, das extern an Angular gesendet wurde, verwenden Sie die EpokK-Lösung.

— James Davies

66

Ist es nur ich oder ist dies die aufgebockteste und unklarste Syntax aller Zeiten?

— narr4jesus

35

Sie können ng-repeatmit folgenden verwenden option:

<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 Ihre einreichen, können formSie den Wert der Eingabe verbergen.

DEMO

ng-selected ng-repeat

— EpokK
quelle

Wenn Sie meine Antwort verringert haben, überprüfen Sie meine neue Lösung.

— EpokK

21

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 wählen Sie die Option für den Fall, dass myselect vorab ausgefüllt wurde.

Ich bevorzuge diese Methode sowieso gegenüber ng-options, da ng-options nur mit Arrays funktioniert. ng-repeat funktioniert auch mit json-ähnlichen Objekten.

— iPirat
quelle

1

ng-optionsfunktioniert auch mit Objektdatenquellen. Siehe docs.angularjs.org/api/ng/directive/select

— Charlie Schliesser

1

Obwohl andere Problemumgehungen gaben, ist diese Lösung bei weitem die eleganteste und dem alten HTML-Stil nahe kommende, funktioniert sowohl mit eckiger Modellbindung als auch mit submitaler Form. Vielen Dank!

— Fadi Chamieh

4

ng-selected benötigt den Lenker nicht, da es sich um eine Winkelanweisung handelt. Hervorragende Lösung.

— Kasey Speakman

20

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>

Arbeitsgeige: http://jsfiddle.net/x8kCZ/15/

— Ida N.
quelle

1

Diese Lösung war die einzige, die für mich bei der Auswahl des Anfangswertes in einem Array von Zeichenfolgen funktioniert hat.

— Ena

Ja, das sollte die Antwort sein, der Track von macht die Magie für mich.

— Gurnard

Ich hatte am wenigsten erwartet, nachdem ich die obigen Lösungen befolgt hatte, aber dies war der einfache Ausweg

— Sack Dahal

10

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

$ scope.option ist nach der Änderung gleich 'var1', auch wenn Sie im generierten HTML den Wert = "0" sehen

Plunker

— Toolkit
quelle