AngularJS单选按钮实例 -

bijian1013

浏览: 3224013 次
性别:
来自: 深圳

最近访客更多访客>>

dy.f

godandghost

lovefiger

marsgrayson

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

AngularJS单选按钮实例

博客分类：

AngularJS

javaScript AngularJS

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