AngularJS - Trigger when radio button is selected

Question

I searched and tried many ng-xxxx kind of options but couldn t find the one   I just want to call some function in the controller when radio button is selected   So it might be similar to following   Of course  below code is not working      lt input type  radio  ng-model  value  value  one  ng-click  checkStuff     gt    Is there any way to achieve what I want

User · Answer

In newer versions of angular  I m using 1 3  you can basically set the model and the value and the double binding do all the work this example works like a charm    x000D   x000D  angular module  radioExample       controller  ExampleController      scope   function  scope    x000D     scope color     x000D      name   blue  x000D       x000D       x000D   lt script src  https   ajax googleapis com ajax libs angularjs 1 3 15 angular min js  gt  lt  script gt  x000D   lt html gt  x000D   lt body ng-app  radioExample  gt  x000D   lt form name  myForm  ng-controller  ExampleController  gt  x000D     lt input type  radio  ng-model  color name  value  red  gt   Red  lt br  gt  x000D     lt input type  radio  ng-model  color name  value  green  gt  Green  lt br  gt  x000D     lt input type  radio  ng-model  color name  value  blue  gt  Blue  lt br  gt  x000D     lt tt gt color     color name   lt  tt gt  lt br  gt  x000D    lt  form gt  x000D     lt  body gt  x000D   lt  html gt  x000D   x000D   x000D

User · Answer

There are at least 2 different methods of invoking functions on radio button selection   1  Using ng-change directive     lt input type  radio  ng-model  value  value  foo  ng-change  newValue value   gt    and then  in a controller    scope newValue   function value         console log value       Here is the jsFiddle  http   jsfiddle net ZPcSe 5   2  Watching the model for changes  This doesn t require anything special on the input level    lt input type  radio  ng-model  value  value  foo  gt    but in a controller one would have    scope  watch  value   function value           console log value          And the jsFiddle  http   jsfiddle net vDTRp 2   Knowing more about your the use case would help to propose an adequate solution

User · Answer

Another approach is using Object defineProperty to set valueas a getter setter property in the controller scope  then each change on the value property will trigger a function specified in the setter   The HTML file    lt input type  radio  ng-model  value  value  one   gt   lt input type  radio  ng-model  value  value  two   gt   lt input type  radio  ng-model  value  value  three   gt    The javascript file   var  value   null  Object defineProperty  scope   value       get  function          return  value                  set  function  value         value   value      someFunction              see this plunker for the implementation

User · Answer

Should use ngChange instead of ngClick if trigger source is not from click   Is the below what you want   what exactly doesn t work in your case     var myApp   angular module  myApp         function MyCtrl  scope         scope value    none         scope isChecked   false       scope checkStuff   function               scope isChecked     scope isChecked             lt div ng-controller  MyCtrl  gt       lt input type  radio  ng-model  value  value  one  ng-change  checkStuff      gt       lt span gt    value   isCheck   isChecked    lt  span gt   lt  div gt

User · Answer

i prefer to use ng-value with ng-if    ng-value  will handle trigger changes    lt input type  radio   name  isStudent  ng-model  isStudent  ng-value  true    gt     to show and hide input by removing it from the DOM  that s make me secure from malicious data   lt input type  text  ng-if  isStudent   name  textForStudent  ng-model  job  gt

User · Answer

lt form name  myForm  ng-submit  submitForm    gt      lt label data-ng-repeat  i in  1 2 3   gt  lt input type  radio  name  test  ng-model   parent radioValue  value    i     gt   i   lt  label gt      lt div gt currently selected    radioValue   lt  div gt      lt button type  submit  gt Submit lt  button gt   lt  form gt

User · Answer

For dynamic values    lt div class  col-md-4  ng-repeat   k  v  in tiposAcesso  gt       lt label class  control-label  gt           lt input type  radio  name  tipoAcesso  ng-model  userLogin tipoAcesso  value    k    ng-change  changeTipoAcesso k     gt                         lt span ng-bind  v  gt  lt  span gt       lt  label gt   lt  div gt    in controller   scope changeTipoAcesso   function value        console log value

[angularjs] AngularJS - Trigger when radio button is selected

Examples related to angularjs