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

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