Question ng-checked et ng-change bouton radio ne fonctionne 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>

Remarque L'entrée radio "2 Mile" est vérifiée en fonction de la structure de portée 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 ng-checked ne fonctionne pas.


10
2017-08-23 00:17


origine


Réponses:


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

PLUNKER FORGE

<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é que je n'ai pas remarqué que vous vouliez avoir un bouton radio par défaut coché, si tel est le cas, l'approche que vous prenez est incorrecte. Vous devez considérer le modèle comme des parties non individuelles dans un groupe de boutons radio mais dans leur ensemble, ils sont censés être une valeur à la place. Vous ne devez pas utiliser ng-repeatla variable de portée de la radio à la place utilise un autre ng-model comme le selectedRadius modèle. Votre entrée radio doit avoir une valeur, et dans ce cas nous utiliserons ng-value pour déterminer la valeur actuelle du modèle.

MISE À JOUR DU 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 DU PLUNKER [2015 janvier]

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

8
2017-08-23 02:29



Utilisez les valeurs par défaut et tout fonctionnera comme un charme, pas besoin de surveiller la portée ou quoi que ce soit ... et Oui il faut ng-model

  • ng-model - fait tout le travail
  • ng-checked - vérifie que l'attribut CHECKED est présent
  • ng-change - va déclencher votre fonction sur le changement 

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
2018-04-23 16:37



C'est parce que ng-change nécessite que ngModel soit présent.

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


2
2017-08-23 02:36



le ng-change la directive exige la ng-model directive à être présent.

De la documentation:

ngChanger

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

- Référence de l'API AngularJS ng-change Directive


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

De la documentation:

ngVérifié

Définit l'attribut vérifié sur l'élément, si l'expression à l'intérieur ngChecked est la vérité.

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

- Référence de l'API de la directive AngularJS ng

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

Pour plus d'informations, voir


0
2017-07-06 17:48