web-dev-qa-db-fra.com

ng-selected ne fonctionne pas dans l'élément select

J'ai un lien choisir 

<select ng-model="collegeSelection" ng-options="c as c.CollegeName for c in colleges" ng-selected="c.CollegeName == collegeSelection.CollegeName" name="selectCollege" id="selectCollege"></select>

mais lorsque c.CollegeName == collegeSelection.CollegeName correspond à l'élément, il n'est toujours pas sélectionné. La documentation ne semble pas aider. Des idées? 

javascriptangularjsangularjs-directive
7
rross

ng-selected doit être utilisé dans la balise <option> et non dans la balise <select>. Examinez de plus près son doc et son exemple.

Car la détermination de l'option sélectionnée par la directive select est basée sur ngModel. Par conséquent, une fois que vous supprimez ng-selected="c.CollegeName == collegeSelection.CollegeName", votre code devrait fonctionner.

J'ai créé un très simple plunk pour montrer la fonctionnalité "sélectionné" dans la directive select.

Plus de détails:

AngularJS utilise la directive ngModel pour activer la "liaison de données bidirectionnelle" entre votre modèle et les éléments de l'interface utilisateur.

Dans le cas de "select", le modèle collegeSelection que vous avez spécifié comme <select ng-model="collegeSelection" ...> est l'élément sélectionné. Ce qui signifie que si un utilisateur sélectionne un élément dans la liste déroulante de la page, collegeSelection sera défini sur cet élément; et , si vous définissez collegeSelection sur un élément de votre code javascript, AngularJS s'assurera que le <option> correspondant est sélectionné.

Supposons que vous ayez le code suivant dans votre contrôleur:

$scope.colleges = [
    {id: 0, name: 'a'},
    {id: 1, name: 'b'},
    {id: 2, name: 'c'}
];

$scope.collegeSelection = $scope.colleges[0];

Et le HTML ressemble à:

<select ng-model="collegeSelection" ng-options="c as c.name for c in colleges"></select>

C'est tout! Le premier collège dans le tableau des collèges sera sélectionné si vous exécutez le code.

Rappelez-vous simplement collegeSelection est l'option sélectionnée, que ce soit parce que l'utilisateur a sélectionné un élément de l'interface utilisateur ou que vous avez sélectionné un élément en javascript.

C'est ainsi que fonctionne la liaison de données bidirectionnelle.

21
Ye Liu

Après avoir joué avec ng-selected pendant un moment, je n’étais pas capable de le faire fonctionner comme vous le demandez. Cependant, j'ai pu présélectionner une option spécifique en utilisant ng-init. 

Voici un JSFiddle de ma solution. Mon <select> a fini par être:

 <select ng-model="selectedColor" ng-options="color.value as color.name for color in colors" ng-init="selectedColor='yellow'">
   <option value="">Select A Color</option>
 </select>`

Et mon tableau colors est:

 colors = [
        {name:'Red', value: 'red'}, 
        {name:'Orange', value: 'orange'}, 
        {name:'Yellow', value: 'yellow'}, 
        {name:'Green', value: 'green'}, 
        {name:'Blue', value: 'blue'}, 
        {name:'Indigo', value: 'Indigo'}, 
        {name:'Violet', value: 'Violet'}
 ]

Changer le ng-init="selectedColor='yellow'" en une autre valeur sélectionnera une autre option.

12
Brett DeWoody

Certaines personnes ont des problèmes avec cela. J'ai trouvé une excellente solution pour un simple menu déroulant si controller as someController

var vm = this;
this.colors = [
        {name:'Red'}, 
        {name:'Orange'}, 
        {name:'Yellow'}, 
        {name:'Green'}, 
        {name:'Blue'}, 
        {name:'Indigo'}, 
        {name:'Violet'}
 ];
this.color_selected = "Yellow";
<select ng-model="someController.color_selected" ng-options="opt.name as opt.name for opt in someController.colors">
</select>

`

1
Mikhail Malakhvei

J'ai eu un problème similaire et j'ai réalisé que la cause était due aux différents types de données. ng-model comparait une valeur de chaîne, mais je tirais un entier de la base de données afin que l'option ne soit pas automatiquement sélectionnée. Pour surmonter cela, j'ai appelé toString() sur l'entier après avoir interrogé les données de la base de données pour s'assurer que les types de données correspondaient.

0
Dennis Wanyonyi