web-dev-qa-db-fra.com

Lier ng-options value et étiqueter sur ng-model

J'utilise ng-options pour générer une balise select dont les options sont des emplacements. Les étiquettes sont les noms d'emplacement et les valeurs sont l'ID d'emplacement (dans la base de données).

J'ai lié la valeur (ID d'emplacement) à un attribut ng-model, mais j'aimerais également lier l'étiquette (nom d'emplacement) à un attribut ng-model différent. (Je dois séparer le champ id car il sera envoyé à un serveur qui attend cet attribut particulier.) Quelle est la meilleure façon de procéder dans Angular?

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"},
        ]
    };
}]);
javascripthtmlangularjsangular-ngmodelng-options
7
eirikir

Vous pouvez modifier ce qui suit et lier l’objet entier. Vous aurez toujours accès à id ultérieurement pour tout ce que vous souhaitez en faire.

<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>

Lien JSFiddle

9
scniro

Ma suggestion est de modéliser d'abord comme un hachage

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

puis utilisez {{availableLocations[purchase.pickUpLocationId]}}

et faire ng-options comme

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

Réponse scniro mise à jour

<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 -Bind ng options value et label

0
Surya R Praveen