ng-vérifié et ng-changement de bouton radio travaillent pas ensemble - angularjs

http://plnkr.co/edit/RP9SpO1qGjn5Ua6pZJ3D?p=preview

angular.module("sampleapp", []).controller('samplecontroller', function($scope,$rootScope) {
  $scope.radii = [
    {id:.25, checked:false, name:"1/4 Mile"},
    {id:.5, checked:false, name:"1/2 Mile"},
    {id:1, checked:false, name:"1 Mile"},
    {id:2, checked:true, name:"2 Mile"},
    {id:3, checked:false, name:"3 Mile"},
    {id:4, checked:false, name:"4 Mile"},
    {id:5, checked:false, name:"5 Mile"}
];

$scope.handleRadioClick = function(){
    alert();

};
});

et html

          <div class="radio">
            <label>
              <input type="radio" name="radius"

                   ng-change="handleRadioClick()"
                   ng-checked="radius.checked">

              {{radius.name}}

            </label>
          </div>

      </li>

Avis "2 Mile" de la radio d'entrée est contrôlé sur la base des rayons de la portée de la structure. Pourquoi ne pas le ng-déclencheurs de changement de la fonction?

Si j'ajoute ng-model, la fonction se déclenche, mais la ng-vérifié ne fonctionne pas.

OriginalL'auteur webmandman | 2014-08-23

8

C'est parce que vous n'êtes pas à l'aide de ng-model:

FOURCHE PLUNKER
```
<div class="radio" ng-repeat="radius in radii" id="selectradius-{{radius.id}}">
  <label>
    <input type="radio" name="radius"

         ng-change="handleRadioClick(selectedRadius)"
         ng-model="radius.checked">

    {{radius.name}}

  </label>
</div>
```
Mise à JOUR:

Je suis désolé que je n'avais pas remarqué que tu voulais avoir un défaut bouton radio coché, si c'est le cas, alors l'approche que vous prenez est incorrect. Vous devez considérer le modèle comme des non-parties individuelles dans un groupe de boutons radio, mais comme un tout, ils sont censés être une valeur à la place. Vous n'avez pas à utiliser ng-repeat's de la radio de la portée de la variable au lieu d'utiliser une autre ng-model comme le selectedRadius modèle. Vous êtes à l'entrée de la radio doit avoir une valeur, et dans ce cas, nous allons utiliser ng-value pour déterminer la valeur actuelle du modèle.

MISE À JOUR PLUNKER [2014 septembre]

JAVASCRIPT

Contrôleur
```
  $scope.radii = [
    {id:.25, name:"1/4 Mile"},
    {id:.5, name:"1/2 Mile"},
    {id:1, name:"1 Mile"},
    {id:2, name:"2 Mile"},
    {id:3, name:"3 Mile"},
    {id:4, name:"4 Mile"},
    {id:5, name:"5 Mile"}
  ];

  //selected value is {id:2, name:"2 Mile"}
  $scope.selectedRadius = $scope.radii[3];
```
HTML
```
<div class="radio" ng-repeat="radius in radii" id="selectradius-{{radius.id}}">
  <label>
    <input type="radio" name="radius"

         ng-change="handleRadioClick(radius)"
         ng-model="selectedRadius"
         ng-value="radius">

    {{radius.name}}

  </label>
</div>
```
mise à JOUR de PLUNKER [Janvier 2015]

dcz.aiguilleur du problème ci-dessous suggéré que la solution ci-dessus ne déclenche pas la ng-change gestionnaire d'événement lorsqu'un bouton radio est resélectionnés. Le principal problème était que le ng-model faisait allusion à la ng-repeatchamp d'application et de ne pas le contrôleur du champ d'application de la deuxième changement. Pour résoudre ce problème, vous pouvez utiliser le $parent de la propriété. Une alternative serait d'utiliser controllerAs alias et utiliser l'alias lui-même pour accéder à votre contrôleur de la propriété. Pour comprendre plus sur les étendues dans AngularJS, je vous suggère de lire plus sur le sujet ici.

HTML
```
<div class="radio" ng-repeat="radius in radii" id="selectradius-{{radius.id}}">
  <label>
    <input type="radio" name="radius"

         ng-change="handleRadioClick($parent.selectedRadius)"
         ng-model="$parent.selectedRadius"
         ng-value="radius">

    {{radius.name}}

  </label>
</div>
```
Bien que, ce n'appelle ma fonction, la valeur par défaut de la radio n'est pas cochée plus. Donc, je suis en train de donner ce parce qu'apparemment, il n'y a aucun moyen de faire les deux choses que je veux. J'espère juste que tout le monde ici comprend ma simple demande et comprend qu'il n'y a pas de solution.
Veuillez vérifier ma mise à jour au sujet de votre problème.
ah, si simple. Je comprends maintenant. je vous remercie beaucoup.

OriginalL'auteur ryeballar
4

Utiliser les valeurs par défaut et tout fonctionnera comme un charme, pas besoin de $montre portée ou quoi que ce soit... et Oui, vous avez besoin ng-model
- ng-model - effectue tous les travaux
- ng vérifiée fait que vous n'avez VÉRIFIÉ attribut présent
- ng-changement - déclenchera votre fonction de Changement
Exemple de code HTML:
```
<input type="checkbox" 
    ng-model="row.active"
    ng-checked="row.active"
    ng-true-value="1"
    ng-false-value="0"
    ng-change="update(row)"
/>

{{ row.active }}
```
JS facultatif:
```
$scope.update = function(row) {
    console.log('row.active');
}
```
Semble faire sens logique, mais dans angulaire docs pour ng-checked il dit: "Notez que cette directive ne doit pas être utilisé avec ngModel, car cela peut entraîner un comportement inattendu."
ngModel et ngChecked ne sont pas destinés à être utilisés ensemble. Voir AngularJS: ng-model engagent pas la responsabilité de ng-coché des cases à cocher.

OriginalL'auteur Playnox
2

C'est parce que ng-changement nécessite ngModel d'être présent.

Espère que cette aide. Cheers!

OriginalL'auteur jleljedal
0

La ng-change directive exige que la ng-model directive être présent.

De la documentation:

ngChange

Remarque, cette directive exige ngModel d'être présent.

— AngularJS ng-modifier la Directive de Référence de l'API

La ng-model et ng-checked directives ne doivent pas être utilisés ensemble

De la documentation:

ngChecked

Définit le vérifié l'attribut de l'élément, si l'expression à l'intérieur de ngChecked est truthy.

Noter que la présente directive ne doit pas être utilisé avec ngModel, car cela peut entraîner un comportement inattendu.

— AngularJS ng-vérifié la Directive de Référence de l'API

Plutôt choisir la valeur initiale de l'automate.

Pour plus d'informations, voir
- AngularJS input[radio] de la Directive de Référence de l'API
OriginalL'auteur georgeawg

Vous devez vous connecter pour publier un commentaire.

ngChange

La ng-model et ng-checked directives ne doivent pas être utilisés ensemble

ngChecked

La `ng-model` et `ng-checked` directives ne doivent pas être utilisés ensemble