AngularJS - Wyzwalanie po wybraniu przycisku opcji

118

Szukałem i wypróbowałem wiele opcji typu ng-xxxx, ale nie mogłem znaleźć jednej .. Po prostu chcę wywołać jakąś funkcję w kontrolerze po wybraniu przycisku radiowego.

Więc może to być podobne do następującego ... (Oczywiście poniższy kod nie działa) 

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

Czy jest jakiś sposób, aby osiągnąć to, czego chcę?

angularjs MomentH
źródło

Odpowiedzi:

231

Istnieją co najmniej 2 różne metody wywoływania funkcji po wybraniu przycisku radiowego:

1) ng-changeDyrektywa Using :

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

a następnie w kontrolerze:

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

Oto jsFiddle: http://jsfiddle.net/ZPcSe/5/

2) Obserwowanie zmian w modelu. Nie wymaga to niczego specjalnego na poziomie wejściowym:

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

ale w kontrolerze należałoby:

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

Oraz jsFiddle: http://jsfiddle.net/vDTRp/2/

Wiedza o Twoim przypadku użycia pomogłaby w zaproponowaniu odpowiedniego rozwiązania.

pkozlowski.opensource
źródło
6
Używam wiązań AngularJS Bootstrap. Zegarek nie działa, ale program obsługi zmiany ng tak.
zmbq
46
Czy istnieje sposób na użycie dyrektywy pojedynczej zmiany ng dla grupy radiowej?
jEremyB
20
To słowo valuesprawia, że ​​jest to dość zagmatwane.
Vibhor Dube
1
@jEremyB .. Nie wiem ng-changekonkretnie o pojedynczym ... ale możesz uniknąć wielu programów obsługi zdarzeń (takich jak włączanie ng-change=...każdego input), używając metody 2: każde wejście wymaga, ng-modela następnie masz jedno watchnasłuchiwanie zmiana ...
dsdsdsdsd
dlaczego nie ng-click?
Tsagana Nokhaeva
19

Powinien użyć ngChange zamiast ngClick, jeśli źródło wyzwalacza nie pochodzi z kliknięcia.

Czy poniżej tego chcesz? co dokładnie nie działa w twoim przypadku?

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
źródło
4
Działa to tylko w przypadku kliknięć. Co się stanie, jeśli zastosowania ustawią przycisk opcji za pomocą klawiatury?
rodrigo-silveira
8

W nowszych wersjach kątowych (ja używam 1.3) możesz w zasadzie ustawić model i wartość, a podwójne wiązanie wykonuje całą pracę, ten przykład działa jak urok:

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>
Rozwiń fragment

Kuba Rozpruwacz
źródło
4

Dla wartości dynamicznych!

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

w kontrolerze

$scope.changeTipoAcesso = function(value) {
    console.log(value);
};
Gleidosn
źródło
2

Innym podejściem jest Object.definePropertyustawienie valuejako właściwości ustawiającej pobierającej w zakresie kontrolera, wtedy każda zmiana właściwości value wyzwoli funkcję określoną w metodzie ustawiającej:

Plik 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"/>

Plik javascript:

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

zobacz ten plunker do implementacji

Leon Plata
źródło
2

wolę używać wartości ng z ng-if, [wartość-ng] obsługuje zmiany wyzwalacza 

<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
źródło
-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
źródło