AngularJS - Kích hoạt khi nút radio được chọn

118

Tôi đã tìm kiếm và thử nhiều loại tùy chọn ng-xxxx nhưng không thể tìm thấy tùy chọn nào .. Tôi chỉ muốn gọi một số chức năng trong bộ điều khiển khi nút radio được chọn.

Vì vậy, nó có thể tương tự như sau .. (Tất nhiên, mã bên dưới không hoạt động)

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

Có cách nào để đạt được điều tôi muốn không?

angularjs

— MomentH
nguồn

231

Có ít nhất 2 phương pháp gọi chức năng khác nhau trên lựa chọn nút radio:

1) Sử dụng ng-changechỉ thị:

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

và sau đó, trong bộ điều khiển:

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

Đây là jsFiddle: http://jsfiddle.net/ZPcSe/5/

2) Xem mô hình để thay đổi. Điều này không yêu cầu bất kỳ điều gì đặc biệt ở cấp đầu vào:

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

nhưng trong bộ điều khiển người ta sẽ có:

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

Và jsFiddle: http://jsfiddle.net/vDTRp/2/

Biết thêm về trường hợp sử dụng của bạn sẽ giúp đề xuất một giải pháp thích hợp.

— pkozlowski.opensource
nguồn

6

Tôi đang sử dụng liên kết AngularJS Bootstrap. Watch không hoạt động, nhưng trình xử lý ng-change thì có.

— zmbq

46

Có cách nào để sử dụng một lệnh ng-change duy nhất cho nhóm radio không?

— jEremyB 19/12/13

20

Từ đó valuelàm cho nó khá khó hiểu.

— Vibhor Dube,

1

@jEremyB .. Tôi không biết ng-changecụ thể về đơn ... nhưng bạn có thể tránh nhiều trình xử lý sự kiện (chẳng hạn như có ng-change=...trên mọi input) bằng cách sử dụng phương pháp 2: mọi đầu vào yêu cầu một ng-modelvà sau đó bạn có một lần watchnghe cho thay đổi ...

— dsdsdsdsd

tại sao không ng-click?

— Tsagana Nokhaeva

19

Nên sử dụng ngChange thay vì ngClick nếu nguồn kích hoạt không phải từ nhấp chuột.

Dưới đây là những gì bạn muốn? chính xác những gì không hoạt động trong trường hợp của bạn?

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
nguồn

4

Điều đó chỉ hoạt động cho các nhấp chuột. Điều gì sẽ xảy ra nếu việc sử dụng đặt một nút radio bằng bàn phím?

— Rodrigo-Silveira

8

Trong các phiên bản mới hơn của angle (tôi đang sử dụng 1.3) về cơ bản, bạn có thể đặt mô hình và giá trị và ràng buộc kép thực hiện tất cả công việc, ví dụ này hoạt động giống như một sự quyến rũ:

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>

Mở rộng đoạn mã

— jack.the.ripper
nguồn

4

Đối với các giá trị động!

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

trong bộ điều khiển

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

— Gleidosn
nguồn

2

Một cách tiếp cận khác đang sử dụng Object.definePropertyđể đặt valuelàm thuộc tính getter setter trong phạm vi bộ điều khiển, sau đó mỗi thay đổi trên thuộc tính value sẽ kích hoạt một hàm được chỉ định trong setter:

Tệp 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"/>

Tệp javascript:

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

xem plunker này để thực hiện

— Leon Plata
nguồn

2

tôi thích sử dụng ng-value với ng-if, [ng-value] sẽ xử lý các thay đổi kích hoạt

<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
nguồn

-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
nguồn