Ich habe Google durchsucht und kann hier nichts finden.
Ich habe diesen Code.
<select ng-model="somethingHere"
ng-options="option.value as option.name for option in options"
></select>
Mit einigen Daten wie diesen
options = [{
name: 'Something Cool',
value: 'something-cool-value'
}, {
name: 'Something Else',
value: 'something-else-value'
}];
Und die Ausgabe ist so ähnlich.
<select ng-model="somethingHere"
ng-options="option.value as option.name for option in options"
class="ng-pristine ng-valid">
<option value="?" selected="selected"></option>
<option value="0">Something Cool</option>
<option value="1">Something Else</option>
</select>
Wie ist es möglich, die erste Option in den Daten als Standardwert festzulegen, damit Sie ein solches Ergebnis erhalten?
<select ng-model="somethingHere" ....>
<option value="0" selected="selected">Something Cool</option>
<option value="1">Something Else</option>
</select>
javascript
angularjs
html-select
iConnor
quelle
quelle
a **single** hard-coded <option> element ... can be nested into the <select> element.
Die Optionen konnten nicht bereits Teil des Markups sein.Antworten:
Sie können einfach verwenden ng-init wie diese
quelle
Wenn Sie sicherstellen möchten, dass Ihr
$scope.somethingHere
Wert bei der Initialisierung Ihrer Ansicht nicht überschrieben wird, möchten SiesomethingHere = somethingHere || options[0].value
den Wert in Ihrem ng-init wie folgt zusammenführen ( ):quelle
options
ich damit um, leer zu sein? Wie beioptions
Daten, die aus externen Quellen stammen.ng-init="somethingHere= somethingHere || 'Select one' "
Ich habe es so versucht. aber es hat nicht funktioniert. Was ist los in meinem CodeVersuche dies:
HTML
Javascript
Plunker hier .
Wenn Sie wirklich den Wert festlegen möchten, der an das Modell gebunden wird, ändern Sie das
ng-options
Attribut inund das Javascript zu
Ein weiterer Plunker hier unter Berücksichtigung der oben genannten.
quelle
Nur eine Antwort von Srivathsa Harish Venkataramana erwähnte,
track by
was in der Tat eine Lösung dafür ist!Hier ist ein Beispiel zusammen mit Plunker (Link unten) für die Verwendung
track by
in selectng-options
:Wenn
selectedCity
auf Winkelbereich definiert, und es hatid
Eigenschaft mit dem gleichen Wert wie jederid
von jedemcity
auf dercities
Liste, wird es automatisch auf Last ausgewählt sein.Weitere Informationen finden Sie in der Quelldokumentation: https://code.angularjs.org/1.3.15/docs/api/ng/directive/select
quelle
Ich denke, nach der Aufnahme von 'track by' können Sie es in ng-Optionen verwenden, um das zu erhalten, was Sie wollten, wie im Folgenden
Diese Vorgehensweise ist besser, da Sie dies nur ändern, wenn Sie die Liste der Zeichenfolgen durch die Liste der Objekte ersetzen möchten
Dabei ist natürlich ein Objekt mit dem Eigenschaftsnamen und der ID. Bitte beachten Sie, dass 'as' auf diese Weise nicht zum Ausdrücken der ng-Optionen verwendet wird, da nur der Wert festgelegt wird und Sie ihn nicht ändern können, wenn Sie track by verwenden
quelle
Die akzeptierte Antwort wird verwendet
ng-init
, aber das Dokument besagt, dass ng-init nach Möglichkeit vermieden werden soll.Sie können auch
ng-repeat
anstelle vonng-options
für Ihre Optionen verwenden. Mitng-repeat
können Sieng-selected
mitng-repeat
speziellen Eigenschaften verwenden. dh $ index, $ odd, $ gerade, damit dies ohne Codierung funktioniert.$first
ist eine der besonderen Eigenschaften von ng-repeat.---------------------- EDIT ----------------
Obwohl dies funktioniert, würde ich @ mik-t's bevorzugen Antworten Sie, wenn Sie wissen, welchen Wert Sie auswählen sollen: https://stackoverflow.com/a/29564802/454252 , der verwendet
track-by
undng-options
ohneng-init
oder verwendetng-repeat
.Diese Antwort sollte nur verwendet werden, wenn Sie das erste Element auswählen müssen, ohne zu wissen, welchen Wert Sie auswählen sollen. Ich verwende dies beispielsweise für die automatische Vervollständigung, bei der ständig das ERSTE Element ausgewählt werden muss.
quelle
ng-options
es schneller und optimierter ist alsng-repeat
.<select>
Zuweisung des Modells über denselect as
Teil des Verständnisausdrucks", "reduzierter Speicherverbrauch, indem kein neuer Bereich für erstellt wird." jede wiederholte Instanz “,„ erhöhte Rendergeschwindigkeit durch Erstellen der Optionen in einemdocumentFragment
statt einzeln “Meine Lösung hierfür war die Verwendung von HTML, um meine Standardoption fest zu codieren. Wie so:
In HAML:
In HTML:
Ich möchte, dass meine Standardoption alle Werte von meiner API zurückgibt. Deshalb habe ich einen leeren Wert. Entschuldigen Sie auch meinen Haml. Ich weiß, dass dies keine direkte Antwort auf die Frage des OP ist, aber die Leute finden dies bei Google. Hoffe das hilft jemand anderem.
quelle
Verwenden Sie den folgenden Code, um die ausgewählte Option aus Ihrem Modell zu füllen.
quelle
Abhängig davon, wie viele Optionen Sie haben, können Sie Ihre Werte in ein Array einfügen und Ihre Optionen automatisch wie folgt ausfüllen
quelle
In meinem Fall musste ich nur einen Anfangswert einfügen, um den Benutzer anzuweisen, eine Option auszuwählen. Daher gefällt mir der folgende Code:
Wenn ich eine Option mit dem Wert! = Einer leeren Zeichenfolge (null) ausprobiert habe, wurde die Option durch eckig ersetzt. Wenn Sie jedoch eine solche Option (mit dem Wert null) einfügen, wird die Auswahl mit dieser Option angezeigt.
Tut mir leid durch mein schlechtes Englisch und ich hoffe, dass ich dabei etwas helfe.
quelle
Verwenden
select
mitngOptions
und Festlegen eines Standardwerts:Weitere Verwendungsbeispiele finden Sie in der ngOptions- Dokumentation
ngOptions
.plnkr.co
Offizielle Dokumentation zum HTML-
SELECT
Element mit eckiger Datenbindung.Bindung
select
an einen Nicht-String-Wert durchngModel
Parsen / Formatieren:plnkr.co
Anderes Beispiel:
jsfiddle
quelle
Das hat bei mir funktioniert.
quelle
In meinem Fall, da die Standardeinstellung von Fall zu Fall im Formular variiert. Ich füge dem Auswahl-Tag ein benutzerdefiniertes Attribut hinzu.
In den Anweisungen habe ich ein Skript erstellt, das den Wert überprüft und beim Ausfüllen durch Winkel die Option mit diesem Wert auf "Ausgewählt" setzt.
})
Ich habe das gerade spontan aus dem Coffescript übersetzt, zumindest ist es richtig, wenn nicht das ganze Ding.
Es ist nicht der einfachste Weg, aber erledigen Sie es, wenn der Wert variiert
quelle
Als Antwort auf die Antwort von Ben Lesh sollte es diese Zeile geben
anstatt
Das ist,
quelle
Verwenden Sie einfach
ng-selected="true"
wie folgt:quelle
Ich würde das Modell in der Steuerung einstellen. Dann wird die Auswahl standardmäßig auf diesen Wert eingestellt. Beispiel: html:
Winkelregler (unter Verwendung der Ressource):
quelle
Das funktioniert bei mir
quelle
ng-init
Sie, weil Sie ein ngModel festlegen.Wenn Sie
ng-options
zum Rendern verwenden,option
wird standardmäßig ein Dropdown-Menü mit dem gleichen Wert wie bei ng-modal ausgewählt. Betrachten Sie das Beispiel:Daher ist die Option mit dem gleichen Wert von
list.key
undselectedItem
standardmäßig ausgewählt.quelle
Ich brauchte die Standardeinstellung "Bitte auswählen", um nicht auswählbar zu sein. Ich musste auch in der Lage sein, eine standardmäßig ausgewählte Option bedingt festzulegen.
Ich habe dies auf folgende vereinfachte Weise erreicht: JS-Code: // Drehe diese 2 um, um den ausgewählten Standard oder keinen Standard mit dem Standardtext "Bitte auswählen" zu testen //$scope.defaultOption = 0; $ scope.defaultOption = {Schlüssel: '3', Wert: 'Option 3'};
HTML:
Ich hoffe, dies hilft jemand anderem, der ähnliche Anforderungen hat.
Die "Bitte auswählen" wurde durch die Antwort von Joffrey Outtier hier erreicht .
quelle
Wenn Sie etwas haben, anstatt nur den Datumsteil zu initiieren, können Sie es verwenden,
ng-init()
indem Sie es in Ihrem Controller deklarieren und oben in Ihrem HTML verwenden. Diese Funktion funktioniert wie ein Konstruktor für Ihren Controller, und Sie können dort Ihre Variablen initiieren.quelle
quelle
Versuchen Sie dies in Ihrem Winkelregler ...
$ SomethingHere = {Name: 'Etwas Cooles'};
Sie können einen Wert festlegen, verwenden jedoch einen komplexen Typ, und der Winkel sucht nach Schlüssel / Wert, der in Ihrer Ansicht festgelegt werden soll.
Wenn dies nicht funktioniert, versuchen Sie Folgendes: ng-options = "option.value as option.name für die Option in options track by option.name"
quelle
Ich denke, der einfachste Weg ist
quelle