AngularJS写一个单选按钮,我们会如下这样写:
app.html
<!doctype html> <html> <head> <script src="jquery-1.10.2.min.js"></script> <script src="angular-1.0.1.min.js"></script> <script src="app.js"></script> </head> <body ng-controller="Ctrl"> <input type="radio" ng-model="model.isChecked" value="1"/> <input type="radio" ng-model="model.isChecked" value="0"/> <br> model.isChecked:{{model.isChecked}} </body> </html>
这里的radio加不加name属性都是没有问题的。
app.js
var module = angular.module( "myApp", [] ); module.controller('Ctrl',function($scope){ $scope.model = { isChecked:'1' }; }); angular.element(document).ready(function() { angular.bootstrap(document,['myApp']); });
运行结果:
此时,如果我们想在切换单选按钮时进行校验,校验不通过,不让切换,可如下实现。
app.html
<!doctype html> <html> <head> <script src="jquery-1.10.2.min.js"></script> <script src="angular-1.0.1.min.js"></script> <script src="app.js"></script> </head> <body ng-controller="Ctrl"> <input type="radio" ng-model="model.isChecked" value="1" ng-click="onRadioClick('1')"/> <input type="radio" ng-model="model.isChecked" value="0" ng-click="onRadioClick('0')"/> <!-- <input type="radio" ng-model="model.isChecked" value="1"/> <input type="radio" ng-model="model.isChecked" value="0"/> --> <br> model.isChecked:{{model.isChecked}} </body> </html>
app.js
var module = angular.module( "myApp", [] ); module.controller('Ctrl',function($scope){ $scope.model = { isChecked:'1' }; $scope.onRadioClick=function(val){ if(!checkIsOk(val)){ $scope.model.isChecked = "0"; } }; /* $scope.$watch('model.isChecked', function(val, oldVal) { if(!checkIsOk(val)){ $scope.model.isChecked = oldVal; } }); */ var checkIsOk = function(val){ if(val=='1'){ return false; } return true; }; }); angular.element(document).ready(function() { angular.bootstrap(document,['myApp']); });
按理解,$watch应该也是能达到目的,但在验证过程中发现$watch在校验不通过时,模型值虽然正常控制了,但页面上这两个单按钮都被选中了。
相关推荐
AngularJS 单选框及多选框的双向动态绑定.docx
单选按钮,实现点击一个按钮就能激发相应的事件,从而显示相应的图片
AngularJS单选框及多选框实现双向动态绑定.docx
VB 单选按钮的属性、方法与事件实例 VB 单选按钮的属性、方法与事件实例
单选按钮和复选框按钮的一个实现实例 单选按钮和复选框按钮的一个实现实例 单选按钮和复选框按钮的一个实现实例 单选按钮和复选框按钮的一个实现实例
给出5个单选按钮和一个button按钮,a写一函数实现以下功能:单击按钮时增加一个单选按钮b. 写一函数实现以下功能:单击某个单选按钮时用对话框显示当前选中的按钮的值
android 自定义 单选按钮 radioButton
NULL 博文链接:https://bijian1013.iteye.com/blog/2392146
如何获取对话框中,哪一个单选按钮被选中,通过弹出框提示
详细的安卓源代码,一个简单的单选按钮的实例。
只需要2个按钮就可以实现单选按钮,超级简单的,超级简单的哦
单选按钮组合选项组效果,素材教程
Flutter Radio 单选按钮
MFC 对话框控件之单选按钮 MFC 对话框控件之单选按钮 MFC 对话框控件之单选按钮
C#280美化单选按钮和复选按钮 源代码
ajax动态获取数据填充下拉列表,下拉列表中选项改变时动态创建单选按钮组,演示时请在本地搭建服务器后演示,否则容易出现:Error:Access is denied.
单选按钮实现性别的选择.rar单选按钮实现性别的选择.rar单选按钮实现性别的选择.rar
一款非常好看的jQuery单选按钮和复选按钮美化效果,精装单选框复选框美化代码。
形考任务六 HTML 表单用于搜集不同类型的用户输入,包括文本输入、单选按钮输入、提交按钮,达到效果入下图所示。
实现了Android的单选按钮组的自定义和多行多列的功能。