AngularJS - Memicu saat tombol radio dipilih

118

Saya mencari dan mencoba banyak jenis opsi ng-xxxx tetapi tidak dapat menemukannya .. Saya hanya ingin memanggil beberapa fungsi di pengontrol ketika tombol radio dipilih.

Jadi mungkin mirip dengan berikut .. (Tentu saja, kode di bawah ini tidak berfungsi) 

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

Adakah cara untuk mencapai apa yang saya inginkan?

angularjs MomentH
sumber

Jawaban:

231

Setidaknya ada 2 metode pemanggilan fungsi yang berbeda pada pemilihan tombol radio:

1) Menggunakan ng-changedirektif:

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

lalu, di pengontrol:

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

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

2) Memperhatikan model untuk perubahan. Ini tidak memerlukan sesuatu yang khusus pada level input:

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

tetapi dalam pengontrol seseorang akan memiliki:

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

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

Mengetahui lebih banyak tentang kasus penggunaan Anda akan membantu dalam mengusulkan solusi yang memadai.

pkozlowski.opensource
sumber
6
Saya menggunakan binding AngularJS Bootstrap. Jam tangan tidak berfungsi, tetapi pengendali ng-change berfungsi.
zmbq
46
Apakah ada cara untuk menggunakan satu perintah ng-change untuk grup radio?
jEremyB
20
Kata valuetersebut membuatnya cukup membingungkan.
Vibhor Dube
1
@jEremyB .. Saya tidak tahu tentang single ng-changesecara spesifik ... tetapi Anda dapat menghindari beberapa event-handler (seperti memiliki ng-change=...on every input) dengan menggunakan metode 2: setiap input memerlukan ng-modeldan kemudian Anda memiliki satu watchpendengaran untuk ubah ...
dsdsdsdsd
kenapa tidak ng-klik?
Tsagana Nokhaeva
19

Harus menggunakan ngChange daripada ngClick jika sumber pemicu bukan dari klik.

Apakah di bawah ini yang Anda inginkan? apa sebenarnya yang tidak berhasil dalam kasus Anda?

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
sumber
4
Itu hanya berfungsi untuk klik. Bagaimana jika penggunaan set tombol radio menggunakan keyboard?
rodrigo-silveira
8

Dalam versi angular yang lebih baru (saya menggunakan 1.3) Anda pada dasarnya dapat mengatur model dan nilai dan pengikatan ganda melakukan semua pekerjaan, contoh ini berfungsi seperti pesona:

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

jack.the.ripper
sumber
4

Untuk nilai dinamis!

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

dalam pengontrol

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

Pendekatan lain menggunakan Object.definePropertyto set valuesebagai properti getter setter dalam lingkup pengontrol, maka setiap perubahan pada properti value akan memicu fungsi yang ditentukan dalam setter:

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

File javascript:

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

lihat plunker ini untuk implementasinya

Leon Plata
sumber
2

saya lebih suka menggunakan ng-value dengan ng-if, [ng-value] akan menangani perubahan pemicu 

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