it-swarm.com.de

AngularJS - Wertattribut für select

Quell-JSON-Daten sind:

[
  {"name":"Alabama","code":"AL"},
  {"name":"Alaska","code":"AK"},
  {"name":"American Samoa","code":"AS"},
  ...
]

Ich versuche

ng-options="i.code as i.name for i in regions"

aber ich bekomme:

<option value="?" selected="selected"></option>
<option value="0">Alabama</option>
<option value="1">Alaska</option>
<option value="2">American Samoa</option>

während ich erwarte zu bekommen:

<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AS">American Samoa</option>

Also, wie bekommt man Wertattribute und "?" Artikel?

Übrigens, wenn ich die $ scope.regions auf einen statischen JSON-Wert anstelle des Ergebnisses der AJAX Anfrage setze, verschwindet das leere Element.

72
Paul

Was Sie zuerst versucht haben, sollte funktionieren, aber das HTML ist nicht das, was wir erwarten würden. Ich habe eine Option hinzugefügt, um den anfänglichen "no item selected" -Fall zu behandeln:

<select ng-options="region.code as region.name for region in regions" ng-model="region">
   <option style="display:none" value="">select a region</option>
</select>
<br>selected: {{region}}

Das Obige generiert diesen HTML:

<select ng-options="..." ng-model="region" class="...">
   <option style="display:none" value class>select a region</option>
   <option value="0">Alabama</option>
   <option value="1">Alaska</option>
   <option value="2">American Samoa</option>
</select>

Geige

Obwohl Angular numerische Ganzzahlen für den Wert verwendet, wird das Modell (dh $ scope.region) wie gewünscht auf AL, AK oder AS gesetzt. (Der numerische Wert wird von verwendet.) Angular, um den richtigen Array-Eintrag zu suchen, wenn eine Option aus der Liste ausgewählt wird.)

Dies kann verwirrend sein, wenn Sie zum ersten Mal erfahren, wie Angular die Anweisung "select" implementiert.

74
Mark Rajcok

Sie können dies nur dann wirklich tun, wenn Sie sie selbst in einer ng-Wiederholung erstellen.

<select ng-model="foo">
   <option ng-repeat="item in items" value="{{item.code}}">{{item.name}}</option>
</select>

ABER ... es lohnt sich wahrscheinlich nicht. Es ist besser, die Funktion wie geplant zu belassen und Angular das Innenleben behandeln zu lassen. Angular verwendet den Index auf diese Weise, damit Sie tatsächlich ein gesamtes Objekt als Objekt verwenden können Sie können also eine Dropdown-Bindung verwenden, um einen ganzen Wert anstatt nur eine Zeichenfolge auszuwählen.

<select ng-model="foo" ng-options="item as item.name for item in items"></select>

{{foo | json}}
26
Ben Lesh

Wenn Sie das track by Option, das value Attribut ist korrekt geschrieben, z.

<div ng-init="a = [{label: 'one', value: 15}, {label: 'two', value: 20}]">
    <select ng-model="foo" ng-options="x for x in a track by x.value"/>
</div>

produziert:

<select>
    <option value="" selected="selected"></option>
    <option value="15">one</option>
    <option value="20">two</option>
</select>
21
Joscha

Wenn das für die Dropdown-Liste angegebene Modell nicht vorhanden ist, generiert angular ein leeres options-Element. Sie müssen das Modell also bei der Auswahl explizit wie folgt angeben:

<select ng-model="regions[index]" ng-options="....">

Beziehen Sie sich auf das Folgende, wie es zuvor beantwortet wurde:

Warum enthält AngularJS in select eine leere Option? und this fiddle

Update: Versuchen Sie dies stattdessen:

<select ng-model="regions[index].code" ng-options="i.code as i.name for i in regions">
</select>

or

<select ng-model="regions[2]" ng-options="r.name for r in regions">
</select>

Beachten Sie, dass das Auswahlelement kein leeres Optionselement enthält.

7
msyed

Sie können Ihr Modell folgendermaßen ändern:

$scope.options = {
    "AL" : "Alabama",
    "AK" : "Alaska",
    "AS" : "American Samoa"
  };

Dann benutze

<select ng-options="k as v for (k,v) in options"></select>
5
Olivier.Roger

Es scheint nicht möglich zu sein, den "Wert" einer Auswahl in irgendeiner sinnvollen Weise als normales HTML-Formularelement zu verwenden und ihn auch in der genehmigten Weise mit ng-options mit Angular= zu verknüpfen. Als Kompromiss musste ich eine versteckte Eingabe neben meine Auswahl stellen und das gleiche Modell wie meine Auswahl nachverfolgen lassen (alles aus Gründen der Kürze sehr vereinfacht vom realen Produktionscode):

HTML:

<select ng-model="profile" ng-options="o.id as o.name for o in profiles" name="something_i_dont_care_about">
</select>
<input name="profile_id" type="text" style="margin-left:-10000px;" ng-model="profile"/>

Javascript:

App.controller('ConnectCtrl',function ConnectCtrl($scope) {
$scope.profiles = [{id:'xyz', name:'a profile'},{id:'abc', name:'another profile'}];
$scope.profile = -1;
}

Dann suchte ich in meinem serverseitigen Code nach params[:profile_id] (Dies war zufällig eine Rails App, aber das gleiche Prinzip gilt überall.) Da die ausgeblendeten Eingaben dasselbe Modell wie die ausgewählten verfolgen, bleiben sie automatisch synchron (kein zusätzliches Javascript erforderlich) Dies ist der coole Teil von Angular. Er macht fast das wieder wett, was er als Nebeneffekt mit dem value-Attribut macht.

Interessanterweise funktionierte diese Technik nur mit Eingabe-Tags, die nicht ausgeblendet waren (weshalb ich den linken Rand verwenden musste: -10000px; Trick, um die Eingabe von der Seite zu entfernen). Diese beiden Varianten haben nicht funktioniert:

<input name="profile_id" type="text" style="display:none;" ng-model="profile"/>

und

<input name="profile_id" type="hidden" ng-model="profile"/>

Das muss bedeuten, dass mir etwas fehlt. Es scheint zu seltsam für ein Problem mit Angular.

4
Tim Cull

sie können verwenden

state.name for state in states track by state.code

Bei Zuständen im JSON-Array ist state der Variablenname für jedes Objekt im Array.

Hoffe das hilft

1
lazell