AngularJS: se activa cuando se selecciona el botón de opción

118

Busqué y probé muchos tipos de opciones ng-xxxx pero no pude encontrar la única. Solo quiero llamar a alguna función en el controlador cuando se selecciona el botón de opción.

Por lo tanto, podría ser similar a lo siguiente ... (Por supuesto, el siguiente código no funciona) 

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

¿Hay alguna forma de lograr lo que quiero?

angularjs Momento
fuente

Respuestas:

231

Hay al menos 2 métodos diferentes para invocar funciones en la selección del botón de radio:

1) ng-changeDirectiva de uso :

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

y luego, en un controlador:

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

Aquí está el jsFiddle: http://jsfiddle.net/ZPcSe/5/

2) Observar cambios en el modelo. Esto no requiere nada especial en el nivel de entrada:

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

pero en un controlador uno tendría:

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

Y el jsFiddle: http://jsfiddle.net/vDTRp/2/

Saber más sobre su caso de uso ayudaría a proponer una solución adecuada.

pkozlowski.opensource
fuente
6
Estoy usando enlaces Bootstrap de AngularJS. Watch no funciona, pero el controlador ng-change sí.
zmbq
46
¿Hay alguna forma de utilizar una directiva de cambio de ng única para el grupo de radio?
jEremyB
20
La palabra valuelo hace bastante confuso.
Vibhor Dube
1
@jEremyB .. No sé sobre el single ng-changeespecíficamente ... pero puede evitar múltiples controladores de eventos (como tener un ng-change=...en cada input) usando el método 2: cada entrada requiere un ng-modely luego tiene una única watchescucha para el cambiar ...
dsdsdsdsd
¿por qué no ng-click?
Tsagana Nokhaeva
19

Debería usar ngChange en lugar de ngClick si la fuente de activación no es de click.

¿Es lo de abajo lo que quieres? ¿Qué no funciona exactamente en tu caso?

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
fuente
4
Eso solo funciona para clics. ¿Qué pasa si los usos configuran un botón de opción usando el teclado?
rodrigo-silveira
8

En las versiones más recientes de angular (estoy usando 1.3), básicamente puedes configurar el modelo y el valor y el enlace doble hacen todo el trabajo, este ejemplo funciona como un encanto:

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

Jack el destripador
fuente
4

¡Por valores dinámicos!

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

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

Otro enfoque es usar Object.definePropertyestablecer valuecomo una propiedad de establecedor de captador en el alcance del controlador, luego cada cambio en la propiedad de valor activará una función especificada en el configurador:

El archivo 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"/>

El archivo javascript:

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

ver este plunker para la implementación

León Plata
fuente
2

prefiero usar ng-value con ng-if, [ng-value] manejará los cambios de activación 

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