Angularjs radio button checked


Angularjs radio button checked : There are many ways to set radio button checked on button click. You can use ng-checked to check a radio button in AngularJs. Here in this tutorial we are going to explain how you can set radio button checked in AngularJs. You can also use our online tool to run and edit the code.


Angularjs radio button checked on Button Click Example

You can set radio button checked on button click as below-

JavaScript Part –

JavaScript Part Contains the following script –

Angularjs radio button checked on Button Click : JavaScript

 <script>
var myApp = angular.module("myApp", []);
 myApp.controller("myController", function($scope) {
 
  $scope.radioChecked = function() {	  
    if(!$scope.master){
       $scope.master = true;
	}else{
	   $scope.master = false;
	}
  }
});
</script>

Html Part-

Html Part Contains the following html –

Angularjs radio button checked on Button Click:

<div ng-controller="myController">  
	
    <button ng-click ="radioChecked()" ng-model='master'>Click to Check </button>
	<br>
	 <input type="radio" ng-checked ="master">
	<br>
	
</div> 

Complete Example-

Now let us combine both javascript and html parts. Here is the complete example –

How to set radio checked on Button Click Example:

<!DOCTYPE html>
<html lang="en">
<head>
 <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js"></script>
 <script>
var myApp = angular.module("myApp", []);
 myApp.controller("myController", function($scope) {
 
  $scope.radioChecked = function() {	  
    if(!$scope.master){
       $scope.master = true;
	}else{
	   $scope.master = false;
	}
  }
});
</script>
</head>
<body>  
<div ng-app="myApp">  
<div ng-controller="myController">  
	
    <button ng-click ="radioChecked()" ng-model='master'>Click to Check </button>
	<br>
	 <input type="radio" ng-checked ="master">
	<br>
	
</div> 
</div>
</body>  
</html>

Try it »

If you run the above example it will produce output something like this –

Angularjs radio button checked


Advertisements

Add Comment

📖 Read More