Angular : les boutons radio ne déclenchent plus "ng-change" après avoir cliqué sur chacun d'eux

Question

Je construis des boutons radio de manière dynamique. ng-change='newValue(value) cesse d'être appelé après que chaque bouton radio ait été pressé une fois.

cela fonctionne : En cliquant sur les boutons radio, la valeur devient foo/bar/baz. http://jsfiddle.net/ZPcSe/19/

<div ng-controller="MyCtrl">
<input type="radio" ng-model="value" value="foo" ng-change='newValue(value)'>
<input type="radio" ng-model="value" value="bar" ng-change='newValue(value)'>
<input type="radio" ng-model="value" value="baz" ng-change='newValue(value)'>    
<hr>
{{value}}
</div>

ce code ne le fait pas : Le {{valeur}} - "label" n'est pas mis à jour une fois que chaque bouton radio a été pressé au moins une fois. Apparemment, ng-change n'est plus activé.

<div ng-controller="MyCtrl">
    <span ng-repeat="i in [0, 1, 2]">
    <input name="asdf" type="radio" ng-model="value" value={{i}} ng-change='newValue(value)'>   
    </span>
    {{value}}
</div>

http://jsfiddle.net/ZPcSe/18/

Les contrôles sont les mêmes à chaque fois :

var myApp = angular.module('myApp', []);

function MyCtrl($scope) {
    $scope.value = '-';
    $scope.newValue = function(value) {
    $scope.value = value;
    }
}

Merci pour votre aide.

Answer 1

ngRepeat crée une nouvelle portée alors j'essaie de mettre value le fixe sur la nouvelle portée. La solution consiste à référencer une propriété sur un objet qui se trouve dans l'étendue parente - la recherche d'objet se fait dans l'étendue parente, et la modification de la propriété fonctionne comme prévu :

HTML :

<div ng-controller="MyCtrl">
<span ng-repeat="i in [0, 1, 2]">
  <input name="asdf" ng-model="options.value" value="{{i}}" type="radio">
</span>
{{options.value}}

JS :

var myApp = angular.module('myApp', []);

function MyCtrl($scope) {
    $scope.options = {
        value: '-'
    };
    $scope.newValue = function(value) {
        // $scope.options.value = value; // not needed, unless you want to do more work on a change
    }
}

Vous pouvez consulter un violon de travail de cette solution de contournement. Voir angular/angular.js#1100 sur GitHub pour plus d'informations.

Answer 2

Pour contourner le problème, nous pouvons faire la même chose en utilisant ng-model="$parent.value" car il s'agirait d'une référence à la parent de ng-repeat portée i.e- sur myCtrl portée

Seul le changement dans ng-model -

<input name="asdf" type="radio" ng-model="$parent.value" value={{i}} ng-change='newValue(value)'>

Voici le violon

Answer 3

Essayez ng-click au lieu de ng-change .