AngularJS - Déclenchement lorsque le bouton radio est sélectionné

118

J'ai cherché et essayé de nombreuses options de type ng-xxxx mais je n'ai pas trouvé celle-là. Je veux juste appeler une fonction dans le contrôleur lorsque le bouton radio est sélectionné.

Cela pourrait donc être similaire à ce qui suit. (Bien sûr, le code ci-dessous ne fonctionne pas) 

<input type="radio" ng-model="value" value="one" ng-click="checkStuff()"/>

Existe-t-il un moyen de réaliser ce que je veux?

angularjs MomentH
la source

Réponses:

231

Il existe au moins 2 méthodes différentes pour appeler des fonctions lors de la sélection de bouton radio:

1) Utilisation de la ng-changedirective:

<input type="radio" ng-model="value" value="foo" ng-change='newValue(value)'>

puis, dans un contrôleur:

$scope.newValue = function(value) {
     console.log(value);
}

Voici le jsFiddle: http://jsfiddle.net/ZPcSe/5/

2) Surveiller le modèle pour les changements. Cela ne nécessite rien de spécial sur le niveau d'entrée:

<input type="radio" ng-model="value" value="foo">

mais dans un contrôleur on aurait:

$scope.$watch('value', function(value) {
       console.log(value);
 });

Et le jsFiddle: http://jsfiddle.net/vDTRp/2/

En savoir plus sur votre cas d'utilisation aiderait à proposer une solution adéquate.

pkozlowski.opensource
la source
6
J'utilise des liaisons AngularJS Bootstrap. Watch ne fonctionne pas, mais le gestionnaire ng-change le fait.
zmbq
46
Existe-t-il un moyen d'utiliser une seule directive ng-change pour le groupe radio?
jEremyB
20
Le mot valueest assez déroutant.
Vibhor Dube
1
@jEremyB .. Je ne connais pas ng-changespécifiquement le single ... mais vous pouvez éviter plusieurs gestionnaires d'événements (comme avoir un ng-change=...on every input) en utilisant la méthode 2: chaque entrée nécessite un ng-modelet ensuite vous avez une seule watchécoute pour le change ...
dsdsdsdsd
pourquoi pas ng-click?
Tsagana Nokhaeva
19

Doit utiliser ngChange au lieu de ngClick si la source de déclenchement ne provient pas d'un clic.

Le dessous est-il ce que vous voulez? qu'est-ce qui ne fonctionne pas exactement dans votre cas?

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

function MyCtrl($scope) {
    $scope.value = "none" ;
    $scope.isChecked = false;
    $scope.checkStuff = function () {
        $scope.isChecked = !$scope.isChecked;
    }
}


<div ng-controller="MyCtrl">
    <input type="radio" ng-model="value" value="one" ng-change="checkStuff()" />
    <span> {{value}} isCheck:{{isChecked}} </span>
</div>
maxisam
la source
4
Cela ne fonctionne que pour les clics. Et si les utilisations définissent un bouton radio à l'aide du clavier?
rodrigo-silveira
8

Dans les nouvelles versions d'angular (j'utilise 1.3), vous pouvez fondamentalement définir le modèle et la valeur et la double liaison font tout le travail, cet exemple fonctionne comme un charme:

angular.module('radioExample', []).controller('ExampleController', ['$scope', function($scope) {
  $scope.color = {
    name: 'blue'
  };
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<html>
<body ng-app="radioExample">
<form name="myForm" ng-controller="ExampleController">
  <input type="radio" ng-model="color.name" value="red">  Red <br/>
  <input type="radio" ng-model="color.name" value="green"> Green <br/>
  <input type="radio" ng-model="color.name" value="blue"> Blue <br/>
  <tt>color = {{color.name}}</tt><br/>
 </form>
  </body>
</html>
Développer l'extrait

Jack l'éventreur
la source
4

Pour des valeurs dynamiques!

<div class="col-md-4" ng-repeat="(k, v) in tiposAcesso">
    <label class="control-label">
        <input type="radio" name="tipoAcesso" ng-model="userLogin.tipoAcesso" value="{{k}}" ng-change="changeTipoAcesso(k)" />              
        <span ng-bind="v"></span>
    </label>
</div>

dans le contrôleur

$scope.changeTipoAcesso = function(value) {
    console.log(value);
};
Gleidosn
la source
2

Une autre approche consiste à utiliser Object.definePropertypour définir valuecomme propriété de setter getter dans la portée du contrôleur, puis chaque modification de la propriété value déclenchera une fonction spécifiée dans le setter:

Le fichier HTML:

<input type="radio" ng-model="value" value="one"/>
<input type="radio" ng-model="value" value="two"/>
<input type="radio" ng-model="value" value="three"/>

Le fichier javascript:

var _value = null;
Object.defineProperty($scope, 'value', {
  get: function () {
    return _value;
  },         
  set: function (value) {
    _value = value;
    someFunction();
  }
});

voir ce plunker pour l'implémentation

Léon Plata
la source
2

je préfère utiliser ng-value avec ng-if, [ng-value] gérera les changements de déclenchement 

<input type="radio"  name="isStudent" ng-model="isStudent" ng-value="true" />

//to show and hide input by removing it from the DOM, that's make me secure from malicious data

<input type="text" ng-if="isStudent"  name="textForStudent" ng-model="job">
Hisham
la source
-1 
 <form name="myForm" ng-submit="submitForm()">
   <label data-ng-repeat="i in [1,2,3]"><input type="radio" name="test" ng-model="$parent.radioValue" value="{{i}}"/>{{i}}</label>
   <div>currently selected: {{radioValue}}</div>
   <button type="submit">Submit</button>
</form>
saktiprasad swain
la source