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在校验不通过时,模型值虽然正常控制了,但页面上这两个单按钮都被选中了。