আমি অনেক এনজি-এক্সএক্সএক্সএক্সএক্সএক্সএক্স বিভিন্ন ধরণের অপশন অনুসন্ধান করেছি এবং এটির সন্ধান করতে পারি নি .. যখন রেডিও বোতামটি নির্বাচন করা হয় তখন আমি নিয়ামকটিতে কিছু ফাংশন কল করতে চাই।
সুতরাং এটি অনুসরণ করার মতো হতে পারে .. (অবশ্যই নীচের কোডটি কাজ করছে না)
<input type="radio" ng-model="value" value="one" ng-click="checkStuff()"/>আমি যা চাই তা অর্জন করার কোনও উপায় আছে?
উত্তর:
কমপক্ষে 2 টি রেডিও বোতাম নির্বাচনের অনুরোধ ফাংশন বিভিন্ন পদ্ধতি আছে:
1) ng-changeনির্দেশনা ব্যবহার :
<input type="radio" ng-model="value" value="foo" ng-change='newValue(value)'>এবং তারপরে, একটি নিয়ামক:
$scope.newValue = function(value) {
console.log(value);
}এখানে জেএসফিডেল: http://jsfiddle.net/ZPcSe/5/
2) পরিবর্তনের জন্য মডেল দেখছেন। এর জন্য ইনপুট স্তরে বিশেষ কিছু প্রয়োজন হয় না:
<input type="radio" ng-model="value" value="foo">তবে একটি নিয়ামকের মধ্যে একটি হতে পারে:
$scope.$watch('value', function(value) {
console.log(value);
});এবং জেএসফিডাল: http://jsfiddle.net/vDTRp/2/
আপনার ব্যবহারের ক্ষেত্রে আরও জানার পক্ষে পর্যাপ্ত সমাধানের প্রস্তাব দেওয়া যায়।
valueএটি বেশ বিভ্রান্ত করছে।
ng-changeবিশেষভাবে একক সম্পর্কে জানি না ... তবে আপনি পদ্ধতি 2 ব্যবহার ng-change=...করে একাধিক ইভেন্ট হ্যান্ডলারগুলি (যেমন প্রত্যেকের সাথে একটি হওয়া input) এড়াতে পারবেন : প্রতিটি ইনপুটটির জন্য একটি প্রয়োজন ng-modelএবং তারপরে আপনার একক watchশ্রুতিতে পরিবর্তন ...
ট্রিগার উত্স যদি ক্লিক না করে থাকে তবে এনজি ক্লিকের পরিবর্তে এনজিচঞ্জ ব্যবহার করা উচিত।
নীচে আপনি কি চান? আপনার ক্ষেত্রে ঠিক কী কাজ করে না?
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> কৌণিকের নতুন সংস্করণগুলিতে (আমি 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>গতিশীল মানগুলির জন্য!
<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);
};আর একটি পদ্ধতির নিয়ামক স্কোপে গেটর সেটার সম্পত্তি হিসাবে Object.definePropertyসেট করতে ব্যবহার করা হচ্ছে value, তারপরে মান সম্পত্তির প্রতিটি পরিবর্তন সেটারে নির্দিষ্ট একটি ফাংশনকে ট্রিগার করবে:
এইচটিএমএল ফাইল:
<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();
}
});বাস্তবায়নের জন্য এই প্লাঙ্কারটি দেখুন
আমি এনজিও-এর সাথে এনজি-মান ব্যবহার করতে পছন্দ করি, [এনজিও-মান] ট্রিগার পরিবর্তনগুলি পরিচালনা করবে
<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"> <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>