ฉันค้นหาและลองใช้ตัวเลือก ng-xxxx หลายตัว แต่ไม่พบตัวเลือกนี้ .. ฉันแค่ต้องการเรียกใช้ฟังก์ชันบางอย่างในคอนโทรลเลอร์เมื่อเลือกปุ่มตัวเลือก
ก็เลยอาจจะคล้าย ๆ ตามนี้ .. (แน่นอนโค้ดด้านล่างใช้ไม่ได้)
<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);
}นี่คือ 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/
การเรียนรู้เพิ่มเติมเกี่ยวกับกรณีการใช้งานของคุณจะช่วยเสนอแนวทางแก้ไขที่เหมาะสม
valueนี้ทำให้เกิดความสับสน
ng-changeโดยเฉพาะ ... แต่คุณสามารถหลีกเลี่ยงตัวจัดการเหตุการณ์หลาย ๆ ตัว (เช่นมีng-change=...ในทุกๆinput) โดยใช้วิธีที่ 2: ทุกอินพุตต้องใช้ng-modelและจากนั้นคุณจะมีการwatchฟังเพียงครั้งเดียวสำหรับ เปลี่ยน ...
ควรใช้ ngChange แทน ngClick หากแหล่งที่มาของทริกเกอร์ไม่ได้มาจากการคลิก
ด้านล่างเป็นสิ่งที่คุณต้องการหรือไม่? อะไรที่ไม่ได้ผลในกรณีของคุณ?
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> ใน 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>สำหรับค่าไดนามิก!
<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เป็นคุณสมบัติ getter setter ในขอบเขตตัวควบคุมจากนั้นการเปลี่ยนแปลงในคุณสมบัติค่าแต่ละครั้งจะทริกเกอร์ฟังก์ชันที่ระบุใน setter:
ไฟล์ 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();
}
});ดูplunkerนี้สำหรับการใช้งาน
ฉันชอบใช้ ng-value กับ ng-if [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"> <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>