it-swarm.com.de

Binden Sie den Wert und das Label der ng-options an das ng-model

Ich benutze ng-options, um ein select-Tag zu generieren, dessen Optionen Standorte sind. Die Bezeichnungen sind die Standortnamen und die Werte sind die Standort-ID (in der Datenbank).

Ich habe den Wert (Standort-ID) an ein ng-model-Attribut gebunden, aber ich möchte auch das Label (Standortname) an ein anderes ng-model-Attribut binden. (Ich muss das id-Feld trennen, da dieses an einen Server gepostet wird, der dieses bestimmte Attribut erwartet.) Was ist der beste Weg, dies in Angular zu tun?

Mein Code:

<div ng-app="app"><div ng-controller="edit">
  <select ng-model="purchase.pickUpLocationId" ng-options="loc.id as loc.name for loc in purchase.availableLocations"></select>

  <!-- This is the model not yet bound: -->
  <p>You have selected {{ purchase.pickUpLocationName }}</p>

</div></div>

var app = angular.module('app', []);

app.controller('edit', ['$scope', function($scope) {
    $scope.purchase = {
        pickUpLocationId: 30,
        availableLocations: [
            {id: 20, name: "Charleston, SC"},
            {id: 30, name: "Atlanta, GA"},
            {id: 40, name: "Richmond, VA"},
        ]
    };
}]);
7
eirikir

Sie können Folgendes ändern und an das gesamte Objekt binden. Sie haben später noch Zugriff auf id für das, was Sie damit machen möchten

<select ng-model="selected" ng-options="loc as loc.name for loc in purchase.availableLocations"></select>

<p>You have selected {{ selected.name }}</p>
<p>You havd id too! {{ selected.id }}</p>

JSFiddle Link

9
scniro

Mein Vorschlag ist, zuerst als Hash zu modellieren

{
   "20": "Charleston, SC",
   "30": "Atlanta, GA"
}

und dann {{availableLocations[purchase.pickUpLocationId]}} verwenden

und ng-Optionen als machen

<select ng-model="purchase.pickUpLocationId" ng-options="id as label for (id, label) in purchase.availableLocations"></select>
3
Nikhil Baliga

Antwort von scniro aktualisiert

<div ng-app="app">
<div ng-controller="ctrl">
     <select ng-model="selected" ng-options="opt as opt.language for opt in tableResult.locales"></select>        
     <p>You have selected {{ selected.language }}</p>
     <p>You havd id too! {{ selected.localeId }}</p>
     <p>
     </p>
     <input type="text" value="{{selected.localeId}} : {{selected.language}}" style="width:50%;"/>

</div>

JSFIDDLE -Bindungsoptionen Wert und Beschriftung

0
Surya R Praveen