J'ai cherché et essayé de nombreuses options de type ng-xxxx mais je n'ai pas trouvé celle Je veux juste appeler une fonction dans le contrôleur lorsque le bouton radio est sélectionné.
Donc, cela pourrait ê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()"/>Y a-t-il un moyen d'obtenir ce que je veux ?
Il existe au moins deux méthodes différentes pour invoquer des fonctions lors de la sélection de boutons radio :
1) Utilisation ng-change directive :
<input type="radio" ng-model="value" value="foo" ng-change='newValue(value)'>et ensuite, dans un contrôleur :
$scope.newValue = function(value) {
console.log(value);
}Voici le jsFiddle : http://jsfiddle.net/ZPcSe/5/
2) Observer les changements dans le modèle. Cela ne nécessite rien de spécial au niveau de l'entrée :
<input type="radio" ng-model="value" value="foo">mais dans un contrôleur on l'aurait fait :
$scope.$watch('value', function(value) {
console.log(value);
});Et le jsFiddle : http://jsfiddle.net/vDTRp/2/
En savoir plus sur votre cas d'utilisation nous aiderait à proposer une solution adéquate.
Devrait utiliser ngChange au lieu de ngClick si la source du déclenchement ne provient pas du clic.
Est-ce ce que vous voulez ? Qu'est-ce qui ne fonctionne pas 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>
Dans les nouvelles versions d'Angular (j'utilise la version 1.3), vous pouvez définir le modèle et la valeur, et la double liaison fait tout le travail :
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>
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>en contrôleur
$scope.changeTipoAcesso = function(value) {
console.log(value);
};
Une autre approche consiste à utiliser Object.defineProperty pour fixer value en tant que propriété getter setter dans la portée du contrôleur, alors chaque changement sur la propriété valeur 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 ceci plunker pour la mise en œuvre
Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.
