web-dev-qa-db-fra.com

AngularJS - Le modèle ne se met pas à jour lors de la sélection du bouton radio généré par ng-repeat

Je génère un tas de boutons radio en utilisant ng-repeat, puis j'essaie de mettre à jour un modèle lorsque l'un d'eux est sélectionné. Cela ne semble pas fonctionner.

Le même balisage fonctionne très bien lorsque les entrées radio sont codées en dur au lieu d'être générées par ng-repeat.

Cela marche:

<input type="radio" ng-model="lunch" value="chicken" name="lunch">
<input type="radio" ng-model="lunch" value="beef" name="lunch">
<input type="radio" ng-model="lunch" value="fish" name="lunch">  
{{lunch}}

Cela ne veut pas:

<input type="radio" ng-model="lunch" ng-repeat="m in meat" value="m" name="lunch">    
{{lunch}}

Voir jsfiddle montrant les deux ici: http://jsfiddle.net/mark_up/A2qCS/1/

Toute aide serait appréciée.

Merci

angularjsangularjs-ng-repeat
47
Mark Simpson
<div ng-controller="DynamicCtrl">
    <input type="radio" ng-model="$parent.lunch" ng-repeat="m in meat"  
    ng-value="m" name="lunch">    
    {{lunch}}
</div>

Devrait faire l'affaire.

Si je comprends bien, ng-repeat crée son propre $scope. vous devez donc vous référer au $parent $scope; Oui, AngularJS est délicat. Vous devez également changer le value en ng-value aussi.

98
mpm

la question ci-dessus a été discutée ici

Cela se produit car ng-repeat crée une nouvelle portée. Fondamentalement, chaque <input> crée une valeur selectedOption sur sa propre portée interne. Pour contourner cela, créez un nouvel objet conteneur pour cette valeur. Par exemple, vous pouvez déclarer dans votre contrôleur:

$scope.data = {selectedOption: x};

Et puis dans votre modèle, utilisez ng-model="data.selectedOption"

de cette façon, ng-model est mis à jour .. :)

c'est délicat

4
Sajjad Ali Khan

Il suffit de remplacer la valeur par la valeur ng

2
Daniele