2014-09-17 1 views
5

Avec angular je voudrais faire une liste de sélection avec la valeur qui prend l'id de mon choix (propriété d'identification réelle d'un objet) et je voudrais le lier correctement avec la directive ng-model.ng-options sélectionne la valeur de liste définie à l'id de mon choix et la lie correctement avec ng-model

Voici ce que j'ai essayé:

<select ng-model="selectedPersonId"     
ng-options="p.id as p.name for p in People track by p.id"></select> 

$scope.People = [ 
    { name : "Fred", id : 1 }, 
    { name : "Joe", id : 2 }, 
    { name : "Sandra", id : 3 }, 
    { name : "Kacey", id : 4 }, 
    { name : "Bart", id : 5 } 
]; 

$scope.setTo1 = function(){ 
    $scope.selectedPersonId = 1; 
} 

http://jsfiddle.net/b7dyadnr/

Ici sélectionner la valeur option est la valeur correcte (la valeur est l'identifiant de la personne chez les personnes) et le texte est correct. Mais la liaison ne fonctionne pas, donc si je mets la valeur de $ scope.selectedPersonId, la sélection n'est pas reflétée dans la liste.

Je sais que je peux le faire fonctionner comme ceci:

<select ng-model="selectedPersonId"     
ng-options="p.id as p.name for p in People"></select> 

http://jsfiddle.net/rgtbn2f5/

Là, il fonctionne, je peux définir scope.selectedPersonId $ et les modifications apparaissent sur la liste. Mais alors l'identifiant utilisé dans la valeur de l'option de liste de sélection n'est pas l'identifiant de la personne réelle!

<option value="0">Fred</option> <!--option value is 0 which is not the true id of fred --> 
<option value="1" selected="selected">Joe</option> 
... 

Je veux l'utiliser comme ceci sauf que je veux angulaire d'utiliser le vrai id de la personne dans la valeur de l'option de sélection et non l'index du tableau ou tout autre chose qu'il utilise.

Si vous vous demandez pourquoi je veux l'utiliser comme ceci, c'est parce que l'identifiant est envoyé à une API et que le modèle peut également être défini en utilisant la chaîne querys, donc je dois le faire fonctionner comme ça.

+0

Votre deuxième exemple utilise l'identifiant de la personne, et non l'indice $. Cela fonctionne comme il se doit. Fred a un identifiant de 1. – pixelbits

+0

@pixelbits non ce n'est pas la valeur d'option de fred est 0 non 1. Il fonctionne tant que je n'envoie pas ou n'utilise pas la valeur d'option de la liste de sélection. –

+0

Je suis confus, la valeur d'option de Fred est clairement 1 de votre poste et dans le violon de démo – pixelbits

Répondre

7

Nous avons eu le même problème à l'époque. Et il semble que p.id fonctionnera seulement dans un endroit soit dans select ou dans trackexpr. La seule façon cela a fonctionné pour moi (valeur a été fixée à id) était comme ça:

<select 
ng-model="selectedPerson"     
ng-options="p as p.name for p in People track by p.id"></select> 

Bien que le code de la personne avec la sélection id = 1 aurait l'air assez laid:

$scope.setTo1 = function() { 
    $scope.selectedPerson = $scope.People.filter(function (item) { 
     return item.id == 1 
    })[0]; 
} 

est ici jsfiddle. Ceci est dû au fait que vous devez affecter à ng-model le même élément que celui que vous avez dans la collection ng-options, car ils sont comparés par référence. Il s'agit d'un angle documentation:

Remarque: ngModel est comparé par référence, et non par valeur. Ceci est important lors de la liaison à un tableau d'objets. Voir un exemple dans ce jsfiddle.

J'abandonnèrent finalement et nous allons angulaire de définir la valeur d'option à tout ce dont il a besoin, car il me permettrait de faire assignemnet comme simeple que: $scope.selectedPersonId = 1

Questions connexes