web-dev-qa-db-fra.com

les boutons ng-vérifié et ng-change ne fonctionnent pas ensemble - angularjs

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

js

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>

Remarquez que l'entrée radio "2 Mile" est vérifiée en fonction de la structure du rayon. Pourquoi le ng-change ne déclenche-t-il pas la fonction?

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

angularjsangularjs-ng-modelangularjs-ng-changeangularjs-ng-checked
10
webmandman

C'est parce que vous n'utilisez pas ng-model:

POUSSOIR FOURCHÉ

<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>

METTRE À JOUR:

Je suis désolé de ne pas avoir remarqué que vous souhaitiez cocher un bouton radio par défaut. Si tel est le cas, l'approche que vous prenez est incorrecte. Vous devez considérer le modèle comme des pièces non individuelles dans un groupe de boutons radio, mais dans leur ensemble, elles sont supposées constituer une valeur. Vous n'êtes pas obligé d'utiliser la variable d'étendue radio de ng-repeat, mais utilisez un autre ng-model comme modèle selectedRadius. Votre radio d'entrée doit avoir une valeur, et dans ce cas, nous utiliserons ng-value pour déterminer la valeur actuelle du modèle.

MISE À JOUR DE PLUNKER [2014 Septembre]

JAVASCRIPT

Manette

  $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 [2015 Janvier]

le problème de dcz.switcher ci-dessous suggère que la solution ci-dessus ne déclenche pas le gestionnaire d'événements ng-change lorsqu'un bouton d'option est resélectionné. Le problème principal était que le ng-model faisait référence à la portée du ng-repeat et non à la portée du contrôleur à partir de la deuxième modification. Pour résoudre ce problème, vous pouvez utiliser la propriété $parent. Une alternative serait d'utiliser controllerAs alias et d'utiliser l'alias lui-même pour accéder à la propriété de votre contrôleur. Pour en savoir plus sur les champs d’application dans AngularJS, je vous suggère de en savoir plus 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>
8
ryeballar

Utilisez les valeurs par défaut et tout fonctionnera comme un charme, pas besoin de regarder $ scope ou quoi que ce soit ... et Oui, vous avez besoin de ng-model

  • ng-model - tout fonctionne-t-il
  • ng-checked - vérifie que l'attribut CHECKED est présent
  • ng-change - va déclencher votre fonction sur-Change 

Exemple HTML: 

<input type="checkbox" 
    ng-model="row.active"
    ng-checked="row.active"
    ng-true-value="1"
    ng-false-value="0"
    ng-change="update(row)"
/>
<!-- test -->
{{ row.active }}

JS optionnel: 

$scope.update = function(row) {
    console.log('row.active');
}
4
Playnox

En effet, ng-change requiert la présence de ngModel.

J'espère que cela t'aides. À votre santé!

2
jleljedal

La directive ng-change requiert la présence de la directive ng-model.

De la documentation:

ngChange

Notez que cette directive requiert que ngModel soit présent.

- Référence API de la directive AngularJS ng-change

Les directives ng-model et ng-checked ne doivent pas être utilisées ensemble

De la documentation:

ngChecked

Définit l'attribut vérifié sur l'élément si l'expression ngChecked est true.

Notez que cette directive ne doit pas être utilisée avec ngModel, ceci pouvant entraîner un comportement inattendu.

- Référence API de la directive AngularJS ng-vérifié

Définissez plutôt la valeur initiale souhaitée à partir du contrôleur.

Pour plus d'informations, voir

0
georgeawg