Lier ng-value des options et l'étiquette de ng-model

Je suis en utilisant ng-options pour générer une balise select, dont les options sont des emplacements. Les étiquettes sont les noms de lieux, et les valeurs sont l'emplacement d'identité (dans la base de données).

J'ai lié la valeur (code d'emplacement) pour un ng-model attribut, mais je tiens également à lier l'étiquette (nom de lieu) d'un autre ng-model attribut. (J'ai besoin de séparer les id champ, car ce seront envoyées à un serveur qui attend cet attribut particulier.) Quelle est la meilleure façon de le faire dans Angulaire?

Mon 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"},
        ]
    };
}]);

OriginalL'auteur eirikir | 2015-04-22

9

Vous pouvez passer à la suivante et se lient à l'ensemble de l'objet. Vous aurez toujours accès à id plus tard, pour tout ce que vous désirez faire avec elle
```
<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 Lien

Cela ne semble pas utiliser l'emplacement par défaut définie dans le contrôleur, même si j'ai mis $scope.purchase.selected = {id: 30, name: "Atlanta, GA" };. Comment cela doit-il être fait?
vous pouvez ajouter quelque chose comme $scope.selected = $scope.purchase.availableLocations[1];
href="http://jsfiddle.net/ryeqntrh/" >mise à jour de violon
avez-vous été en mesure de résoudre ce problème?
cela peut être un bon candidat pour http transformations. Si vous faites défiler vers le bas pour par demande transformations si vous avez besoin de changer votre nom de propriété d'objet

OriginalL'auteur scniro
3

Ma suggestion est de modéliser un algorithme de hachage première
```
{
   "20": "Charleston, SC",
   "30": "Atlanta, GA"
}
```
et ensuite utiliser {{availableLocations[purchase.pickUpLocationId]}}

et faire ng-options
```
<select ng-model="purchase.pickUpLocationId" ng-options="id as label for (id, label) in purchase.availableLocations"></select>
```
il devrait être purchase.pickUpLocationId
Vous dites que je devrais stocker availableLocations comme une table de hachage? Comment ng-options de travail dans ce cas?
J'ai mis à jour. Merci @jcubic pour souligner la faute de frappe, il fixe.

OriginalL'auteur Nikhil Baliga

Mis à jour scniro réponse

<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 -Lier ng options de la valeur et de l'étiquette

OriginalL'auteur Surya R Praveen

Vous devez vous connecter pour publier un commentaire.

JSFiddle Lien