L'événement ng-change ne se déclenche qu'une fois pour chaque bouton radio lorsqu'il est créé avec ng-repeat
J'ai créé un AngularJS directive avec des boutons radio pour contrôler l'environnement de ma page de requête et de l'ajouter à ma page. Je suis l'aide d'une liaison bidirectionnelle à la carte une portée locale variable appelée environment
à une application variable avec le même nom. Il semble bien fonctionner quand je créer les boutons de la radio de manière explicite dans le modèle (dans mon code j'utilise templateUrl
à la place, mais toujours le même problème).
<div>
<label><input type="radio" name="env" ng-model="environment" ng-change="changeEnvironment(1)" value="1" />Testing</label>
<label><input type="radio" name="env" ng-model="environment" ng-change="changeEnvironment(2)" value="2" />Production</label>
</div>
Je peux sélectionner chaque choix autant de fois que je veux, et la valeur des bulles tout le chemin jusqu'à l'application du champ d'application variable.
Je voulais changer de la création de la radio boutons à utiliser ng-repeat
sur un tableau de choix des objets. Il crée les options, et il saisit la ngChange
événement, mais seulement une fois pour chaque choix.
<label ng-repeat="choice in choices">
<input type="radio" name="env" ng-model="environment" ng-change="changeEnvironment(choice)" value="{{ choice.id }}" />{{ choice.name }}
</label>
Ici est la version de travail de violon et les parties pertinentes de mon directive code:
template: '<div>'
+ '<label><input type="radio" name="env" ng-model="environment" ng-change="changeEnvironment(1)" value="1" />Testing</label>'
+ '<label><input type="radio" name="env" ng-model="environment" ng-change="changeEnvironment(2)" value="2" />Production</label>'
+ '<div>Directive environment: {{ environment }}</div>'
+ '</div>',
link: function(scope, element, attributes) {
scope.changeEnvironment = function(choiceID) {
console.log('SELECTED environment ' + choiceID);
scope.environment = choiceID;
console.log('directive environment = ' + scope.environment);
};
}
Et voici la version qui ne fonctionne qu'une fois:
template: '<div><label ng-repeat="choice in choices">'
+ '<input type="radio" name="env" ng-model="environment" ng-change="changeEnvironment(choice)" value="{{ choice.id }}" />{{ choice.name }}'
+ '</label>'
+ '<div>Directive environment: {{ environment }}</div>'
+ '</div>',
link: function(scope, element, attributes) {
scope.choices = [
{ id: 1, name: "Testing" },
{ id: 2, name: "Production" }
];
scope.changeEnvironment = function(choice) {
console.log('SELECTED environment ' + choice.id);
scope.environment = choice.id;
console.log('directive environment = ' + scope.environment);
};
}
Je suis tout nouveau à AngularJS, il est donc tout à fait possible, je suis en train de faire une erreur très basique. Quelqu'un peut me pointer dans la bonne direction?
Mise à JOUR Comme par callmekatootie de la suggestion, j'ai changé l'événement en question de ng-change
à ng-click
et il se déclenche à chaque fois. Que va faire pour contourner pour l'instant, mais j'ai d'abord utilisé ng-change
parce que je ne pense pas que ng-click
s'appliquerait aux changements causés par cliquant sur l'étiquette de texte plutôt que de l'entrée elle-même, mais en fait il ne. Ne comprends toujours pas pourquoi ng-change
ne se déclenche une fois, même si.
source d'informationauteur Danny
Vous devez vous connecter pour publier un commentaire.
Utiliser un objet au lieu d'une valeur primitive:
Supprimer
ng-change
et$watch
.ng-model
sera suffisant (sauf si je suis malentendu le cas d'utilisation).Démo: http://jsfiddle.net/GLAQ8/
Très bon post sur les prototypes de l'héritage peut être trouvé ici.
La cause du problème, c'est que
ngRepeat
permettra de créer de nouvelles étendues pour ses enfants (ainsi que des prototypes de l'héritage affecte les étendues).La Angulaire wiki a une assez bonne (et complète) explication de la manière dont la portée de l'héritage (et les pièges courants).
Cette réponse à une très similaires (dans la nature) problème assez bien explique le problème.
Dans votre cas particulier, vous pourriez introduse un objet (par exemple,
local
) et d'affecter lesenvironment
comme sa propriété):Ensuite, vous devez lier votre modèle pour qu' "encaplulated" la propriété:
Voir, aussi, cette courte démo.
Mise à JOUR
Cette réponse a l'intention de souligner la racine de la question.
Une mise en œuvre différente (comme celles proposées par tasseKATT ou Leon) est certainement recommandé (et de façon plus "Angularish").
vous utilisez enviorement au lieu de $parent.enviorement dans votre ng-événement de changement qui est liée à la répétition de la portée, pas le ng-repeat parent où la enviorement variable vie,
http://jsfiddle.net/cJ4Wb/7/
avis que, dans ce cas, vous n'avez même pas besoin de le événements de garder enviorement mis à jour et des changements dans le modèle refelct dans les boutons de la radio