AngularJS写一个单选按钮，我们会如下这样写：

app.html

model.isChecked:{

{model.isChecked}}

这里的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

model.isChecked:{

{model.isChecked}}

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