AngularJS-ラジオボタンが選択されたときにトリガー


118

多くのng-xxxx種類のオプションを検索して試しましたが、見つかりませんでした。ラジオボタンが選択されているときに、コントローラーの関数を呼び出したいだけです。

したがって、次のようになります。(もちろん、以下のコードは機能しません)

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

私が望むものを達成する方法はありますか?

回答:


231

ラジオボタンの選択で関数を呼び出すには、少なくとも2つの異なる方法があります。

1)ng-changeディレクティブを使用:

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

そして、コントローラで:

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

ここにjsFiddleがあります:http ://jsfiddle.net/ZPcSe/5/

2)モデルの変更を監視します。これは入力レベルで特別なことを必要としません:

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

ただし、コントローラーでは次のようになります。

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

そしてjsFiddle:http ://jsfiddle.net/vDTRp/2/

ユースケースについて詳しく知ることは、適切なソリューションを提案するのに役立ちます。


6
AngularJS Bootstrapバインディングを使用しています。ウォッチは機能しませんが、ng-changeハンドラは機能します。
zmbq 2013年

46
ラジオグループに単一のng-changeディレクティブを使用する方法はありますか?
jEremyB 2013

20
言葉valueはそれをかなり混乱させています。
Vibhor Dube

1
@jEremyB ..シングルについてng-change具体的にはわかりません...しかし、メソッド2を使用することで、複数のイベントハンドラー(ng-change=...on on everyなどinput)を回避できます。すべての入力にが必要でng-modelありwatch、変更...
dsdsdsdsd 2016

なぜngクリックしないのですか?
Tsagana Nokhaeva

19

トリガーソースがクリックからのものでない場合は、ngClickではなくngChangeを使用する必要があります。

以下はあなたが欲しいものですか?あなたの場合、正確には何が機能しませんか?

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>   

4
これはクリックに対してのみ機能します。がキーボードを使用してラジオボタンを設定するとどうなりますか?
rodrigo-silveira 14

8

angularの新しいバージョン(私は1.3を使用しています)では、基本的にモデルを設定でき、値と二重バインディングはこの例が魅力のように機能するすべての作業を行います:

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>


4

動的な値の場合!

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

コントローラ内

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

2

別のアプローチは、を使用Object.definePropertyvalueてコントローラースコープでゲッターセッタープロパティとして設定し、値プロパティを変更するたびに、セッターで指定された関数をトリガーします。

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

JavaScriptファイル:

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

実装については、このプランカーを参照してください


2

ng-ifと一緒にng-valueを使用したいのですが、[ng-value]はトリガーの変更を処理します

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

-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>
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.