AngularJS - ट्रिगर जब रेडियो बटन का चयन किया जाता है

118

मैंने कई एनजी-एक्सएक्सएक्स प्रकार के विकल्पों की खोज की और कोशिश की, लेकिन एक को नहीं खोज सका .. मैं केवल नियंत्रक में कुछ फ़ंक्शन को कॉल करना चाहता हूं जब रेडियो बटन चुना जाता है।

तो यह निम्नलिखित के समान हो सकता है .. (बेशक, नीचे कोड काम नहीं कर रहा है)

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

क्या मैं जो चाहता हूं उसे हासिल करने का कोई तरीका है?

angularjs

— MomentH
स्रोत

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);
 });

और jsField: http://jsfiddle.net/vDTRp/2/

आपके उपयोग के मामले के बारे में अधिक जानने से पर्याप्त समाधान का प्रस्ताव करने में मदद मिलेगी।

— pkozlowski.opensource
स्रोत

6

मैं AngularJS बूटस्ट्रैप बाइंडिंग का उपयोग कर रहा हूं। देखो काम नहीं करता है, लेकिन एनजी-परिवर्तन हैंडलर करता है।

— ज़म्बक

46

क्या रेडियो समूह के लिए एक एकल एनजी-परिवर्तन निर्देश का उपयोग करने का एक तरीका है?

— jEremyB

20

शब्द valueइसे काफी भ्रामक बना रहा है।

— विभोर दुबे

1

@jEremyB .. मैं ng-changeविशेष रूप से एकल के बारे में नहीं जानता ... लेकिन आप विधि 2 का उपयोग करके कई ईवेंट-हैंडलर (जैसे ng-change=...हर पर होने वाले input) से बच सकते हैं : हर इनपुट के लिए एक की आवश्यकता होती है ng-modelऔर फिर आपके पास एक एकल के लिए watchसुनना होता है परिवर्तन ...

— dsdsdsdsd

एनजी-क्‍लिक क्‍यों नहीं?

— त्सगाना नोखेवा

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>

— maxisam
स्रोत

4

वह केवल क्लिक के लिए काम करता है। क्या होगा यदि कीबोर्ड के उपयोग से रेडियो बटन सेट हो जाए?

— कृतिगो-सिल्विरा

8

कोणीय के नए संस्करणों में (मैं 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);
};

— Gleidosn
स्रोत

2

एक अन्य दृष्टिकोण नियंत्रक क्षेत्र में एक गेट्टर सेटर संपत्ति के रूप में Object.definePropertyसेट करने के लिए उपयोग कर रहा है value, फिर मूल्य संपत्ति पर प्रत्येक परिवर्तन सेटर में निर्दिष्ट फ़ंक्शन को ट्रिगर करेगा:

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

जावास्क्रिप्ट फ़ाइल:

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>

— सक्तीप्रसाद हंस
स्रोत