angularjs - angular element add



AngularJS-Dispara quando o botão de rádio é selecionado (5)

Deve usar ngChange em vez de ngClick se a origem do trigger não for de um clique.

Está abaixo o que você quer? o que exatamente não funciona no seu 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>   

https://ffff65535.com

Eu procurei e tentei muitas opções de ng-xxxx, mas não consegui encontrar a única .. Eu só quero chamar alguma função no controlador quando o botão de rádio é selecionado.

Então, pode ser semelhante ao seguinte .. (Claro, abaixo do código não está funcionando)

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

Existe alguma maneira de conseguir o que eu quero?


Em versões mais recentes de angular (estou usando 1.3) basicamente você pode definir o modelo e o valor e a dupla ligação fazem todo o trabalho deste exemplo funciona como um 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>


Existem pelo menos dois métodos diferentes para invocar funções na seleção de botões de opção:

1) Usando ng-change diretiva ng-change :

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

e depois, em um controlador:

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

Aqui está o jsFiddle: http://jsfiddle.net/ZPcSe/5/

2) Observando o modelo para mudanças. Isso não requer nada de especial no nível de entrada:

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

mas em um controlador um teria:

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

E o jsFiddle: http://jsfiddle.net/vDTRp/2/

Saber mais sobre o seu caso de uso ajudaria a propor uma solução adequada.


Outra abordagem é usar Object.defineProperty para definir value como uma propriedade setter getter no escopo do controlador, então cada mudança na propriedade value acionará uma função especificada no setter:

O arquivo 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"/>

O arquivo javascript:

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

veja este plunker para a implementação


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




angularjs