Angular js dynamic sélectionnez ne pas lier à ngmodel

Question

Je génère dynamiquement un select en utilisant ngrepeat à partir d'un objet $ scope et je dois assigner l'option select par défaut basée sur une autre valeur dans le même objet $ scope: Voici le code actuel:

<select id="group" ng-model="data.group" convert-to-number> 
    <option ng-repeat="item in data.groups" value="{{item.id}}"> 
     {{item.group}} 
    </option> 
</select> 
{{data.group}} 

objet dans le contrôleur:

$scope.data = { 
    group: 2, 
    groups: [{ 
     id: 1, 
     name: 'Group One' 
    },{ 
     id:2, 
     name: 'Group Two' 
    },{ 
     id:3, 
     name: 'Group Three' 
    }] 
} 

converti à numéro est une directive qui convertit les valeurs de portée de $ à des numéros pour correspondre avec l'identifiant des options de sélection et tout fonctionne si je crée des options codés en dur . Une fois que je génère dynamiquement les options avec ng-repeat, il affiche les options correctes de data.groups dans select, et affiche l'ID de groupe correct dans {{data.group}}, mais la boîte de sélection est vide et Je dois cliquer pour voir les options et quand j'en sélectionne une, elle met à jour {{data.group}} la valeur sélectionnée de l'option.

Comme mentionné avec les options codées en dur, tout le code fonctionne et l'option correcte est sélectionnée par défaut en fonction de la valeur {{data.group}}.

Pourquoi le groupe de données ne sélectionne-t-il pas l'option dans ces options dynamiques lorsqu'il est initialisé pour la première fois?

Merci

Answer 1

La façon dont fonctionne AngularJS est à l'aide ng-selected dans la balise <option> pour confirmer l'option correspond au modèle. L'exemple de code suivant fonctionnerait:

<option ng-selected="data.group == item.id"> ... </option>