AngularJS - Wird ausgelöst, wenn das Optionsfeld ausgewählt ist

117

Ich habe viele ng-xxxx-Optionen gesucht und ausprobiert, konnte aber keine finden. Ich möchte nur eine Funktion in der Steuerung aufrufen, wenn das Optionsfeld ausgewählt ist.

Es könnte also ähnlich sein wie folgt: (Natürlich funktioniert der folgende Code nicht) 

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

Gibt es eine Möglichkeit, das zu erreichen, was ich will?

angularjs MomentH
quelle

Antworten:

230

Es gibt mindestens zwei verschiedene Methoden zum Aufrufen von Funktionen zur Auswahl von Optionsfeldern:

1) Verwenden der ng-changeRichtlinie:

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

und dann in einem Controller:

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

Hier ist die jsFiddle: http://jsfiddle.net/ZPcSe/5/

2) Beobachten Sie das Modell auf Änderungen. Dies erfordert nichts Besonderes auf der Eingangspegel:

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

aber in einem Controller hätte man:

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

Und die jsFiddle: http://jsfiddle.net/vDTRp/2/

Wenn Sie mehr über Ihren Anwendungsfall wissen, können Sie eine angemessene Lösung vorschlagen.

pkozlowski.opensource
quelle
6
Ich verwende AngularJS Bootstrap-Bindungen. Watch funktioniert nicht, der ng-change-Handler jedoch.
Zmbq
46
Gibt es eine Möglichkeit, eine einzige ng-change-Direktive für die Funkgruppe zu verwenden?
jEremyB
20
Das Wort valuemacht es ziemlich verwirrend.
Vibhor Dube
1
@jEremyB .. Ich weiß nicht genau über die Single Bescheid ng-change... aber Sie können mehrere Event-Handler (z. B. eine ng-change=...auf jeder input) vermeiden, indem Sie Methode 2 verwenden: Jede Eingabe erfordert eine ng-modelund dann haben Sie eine einzige watchAbhörfunktion für die ändern ...
dsdsdsdsd
warum nicht ng-click?
Tsagana Nokhaeva
19

Sollte ngChange anstelle von ngClick verwenden, wenn die Triggerquelle nicht von click stammt.

Ist das unten, was Sie wollen? Was genau funktioniert in Ihrem Fall nicht?

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
quelle
4
Das funktioniert nur bei Klicks. Was ist, wenn die Verwendung ein Optionsfeld über die Tastatur setzt?
Rodrigo-Silveira
8

In neueren Versionen von Angular (ich verwende 1.3) können Sie das Modell und den Wert festlegen. Die Doppelbindung erledigt die gesamte Arbeit, die in diesem Beispiel ausgeführt wird, wie ein Zauber:

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>
Erweitern Sie das Snippet

Jack the Ripper
quelle
4

Für dynamische Werte!

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

in der Steuerung

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

Ein anderer Ansatz ist Object.definePropertydas Festlegen valueals Getter-Setter-Eigenschaft im Controller-Bereich. Bei jeder Änderung der Value-Eigenschaft wird eine im Setter angegebene Funktion ausgelöst:

Die HTML-Datei:

<input type="radio" ng-model="value" value="one"/>
<input type="radio" ng-model="value" value="two"/>
<input type="radio" ng-model="value" value="three"/>

Die Javascript-Datei:

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

Siehe diesen Plunker für die Implementierung

Leon Plata
quelle
2

Ich bevorzuge die Verwendung von ng-value mit ng-if. [ng-value] behandelt Triggeränderungen 

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