AngularJS - Wertattribut für select

JSON-Quelldaten 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 man Wertattribute erhält und "?" Artikel?

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

Was Sie zuerst versucht haben, sollte funktionieren, aber der HTML-Code entspricht nicht unseren Erwartungen. Ich habe eine Option hinzugefügt, um den anfänglichen Fall "Kein Element ausgewählt" 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) je nach Wunsch auf AL, AK oder AS gesetzt. (Der numerische Wert wird von Angular verwendet, 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 seine Direktive "select" implementiert.

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 ist es wahrscheinlich nicht wert. Es ist besser, es so zu lassen, wie es entworfen wurde, und Angular das Innenleben überlassen. Angular verwendet den Index auf diese Weise, sodass Sie tatsächlich ein gesamtes Objekt als Wert verwenden können. Sie können also eine Dropdown-Bindung verwenden, um einen ganzen Wert und nicht nur eine Zeichenfolge auszuwählen, was ziemlich beeindruckend ist:

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

{{foo | json}}

Wenn Sie die track byOption verwenden, ist das valueAttribut 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>

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

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

Beziehen Sie sich auf Folgendes, wie es zuvor beantwortet wurde:

Warum enthält AngularJS eine leere Option in select? und diese Geige

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 die Auswahl kein leeres Optionselement enthält.

Sie können Ihr Modell so ändern, dass es folgendermaßen aussieht:

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

Dann benutze

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

Es scheint nicht möglich zu sein, den "Wert" einer Auswahl in irgendeiner sinnvollen Weise als normales HTML-Formularelement zu verwenden und ihn auch auf genehmigte Weise mit ng-options an Angular anzuschließen. Als Kompromiss musste ich schließlich eine versteckte Eingabe neben meine Auswahl setzen und sie das gleiche Modell wie meine Auswahl verfolgen lassen (alles aus Gründen der Kürze sehr stark von echtem Produktionscode vereinfacht):

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 habe ich in meinem serverseitigen Code nur gesucht params[:profile_id](dies war zufällig eine Rails-App, aber das gleiche Prinzip gilt überall). Da die versteckten Eingaben dasselbe Modell wie die Auswahl verfolgen, bleiben sie automatisch synchron (kein zusätzliches Javascript erforderlich). Dies ist der coole Teil von Angular. Es gleicht fast aus, was es als Nebeneffekt mit dem Wertattribut macht.

Interessanterweise stellte ich fest, dass diese Technik nur mit Eingabe-Tags funktioniert, die nicht ausgeblendet waren (weshalb ich den Rand links verwenden musste: -10000px; Trick, um die Eingabe von der Seite zu verschieben). 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"/>

Ich denke, das muss bedeuten, dass mir etwas fehlt. Es scheint zu seltsam, um ein Problem mit Angular zu sein.

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

Versuchen Sie es wie folgt:

var scope = $(this).scope();
alert(JSON.stringify(scope.model.options[$('#selOptions').val()].value));