AngularJS - Wertattribut für select

Kann man nicht wirklich, dies zu tun, es sei denn, Sie bauen Sie sich selbst in einer ng-repeat.

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

ABER... es ist wahrscheinlich nicht Wert. Es ist besser, lassen Sie es wie vorgesehen funktioniert und lassen Sie Eckige Griff das Innenleben. Angular verwendet den index auf diese Weise, so kann man eigentlich ein ganzes Objekt als Wert. So können Sie eine drop-down-Bindung zu wählen, eine ganze statt nur einer saite, die ist ziemlich genial:

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

{{foo | json}}

InformationsquelleAutor der Antwort Ben Lesh

Wenn das Modell angegeben, um das Dropdown nicht existiert, dann eckig, erzeugen eine leere Optionen element. So müssen Sie explizit angeben, das Modell auf der wählen Sie wie folgt aus:

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

Beziehen sich auf die folgenden, da es bereits beantwortet wurde, bevor:

Warum AngularJS enthalten eine leere option wählen Sie? und diese fiddle

Update: Versuchen Sie dies:

<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 es keinen leeren Optionen element in der select.

InformationsquelleAutor der Antwort msyed

Scheint es nicht möglich, die tatsächlich mit dem "Wert" einer wählen Sie in irgendeiner sinnvollen Weise wie eine normale HTML-form-element und auch Haken es bis zu Winkel in der genehmigten Art und Weise mit ng-Optionen. Als Kompromiss, ich endete, dass Sie einen versteckten Eingang neben dem auswählen und es haben verfolgen das gleiche Modell wie meine wählen Sie, wie hier (alles sehr vereinfacht von real production code für die Kürze):

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, in meinem server-side code, den ich nur nach Begriffen params[:profile_id] (dies geschah, um eine Rails-app, aber das gleiche Prinzip gilt überall). Weil die hidden-input-tracks das gleiche Modell wie das wählen, bleiben Sie in Synchronisierung automatisch (kein zusätzliches javascript erforderlich). Das ist die Coole Teil Eckig. Fast macht für das, was es tut, um das value-Attribut als Nebenwirkung.

Interessant fand ich diese Technik funktioniert nur mit input-tags wurden nicht ausgeblendet (das ist, warum ich habe das margin-left:-10000px; trick, bewegen Sie den Eingang von der Seite). 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 fühle mich wie, dass muss bedeuten, ich bin etwas fehlt. Es scheint auch seltsam, denn es ist ein problem mit den Eckigen.

InformationsquelleAutor der Antwort Tim Cull

Versuchen Sie es wie folgt:

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

InformationsquelleAutor der Antwort blackHu