This article
will teach you the basics of Radiobutton list list in AngularJs with Asp.Net
Mvc Application.Yo can use Microsoft Visual studio to follow this article.
Create a Sample Asp.Net Mvc application name it as AngularRadioButtonList.the
project architecture doesn’t contain any angularjs scripts, so we need to add
angularjs scripts from Nuget
Packages.
Right click on project “AngularRadioButtonList”=> select Manage Nuget Package=> on top right search as angularjs ,you will get
Angularjs related frameworks now select Angularjs and click on install.Now
angularjs scripts successfully added your scripts Folder.
Angularjs doesn’t have directives to build
radiobuttions like ng-options use to build select list.
Now create one mvc controller name it as radio and add
one action method index
Add view to inde action method,now include following
script from the scripts folder
<script src="~/Scripts/angular.min.js"></script>
See the below example
<script src="~/Scripts/angular.min.js"></script>
<script>
angular.module('radioExample', [])
.controller('ExampleController', ['$scope', function ($scope) {
}]);
</script>
<form name="myForm" ng-app="radioExample">
<div ng-controller="ExampleController">
<label>
<input type="radio" ng-model="country.name" value="India">
India
</label><br />
<label>
<input type="radio" ng-model="country.name" value="USA">
USA
</label><br />
<label>
<input type="radio" ng-model="country.name" value="China">
China
</label><br />
<h3>Country = {{country.name | json}}</h3><br />
</div>
</form>
In the above example we
need to include ng-app and ng-controller because ng-app is used to initialize
angularjs application,the ng-app directive should be initialzed at root element
of the application ,its not mandatory.
ng-controller is a
javascript function,it prepares the model
for view. The ng-controller attaches model to the scope.
Radio button in angularjs has the following aruments.
ngModel : it is a
assignable angular expression ,we can assign dynamic data
value: whenever we select
ngModel that value will be set to this value
parameter. value supports only string values.
parameter. value supports only string values.
ngchange: this is like radiobutton event ,it will execute when input
changes
name:it is property name
of the form.
ngValue: when radio button
is selected ng-model value will be set to this ng-value.we can use it instead
of value parameter.
Apart from now select the
radio button it will display the selected radiobutton value.
Lets see the output
Tags:Radiobuton list in angularjs ,static
radiobuttonlist in angularjs,dynamic radiobuttonlist in angularjs,radiobuttonlist,angularjs
radiobuttonlist ,mvc angularjs radiobutton,radiobuttonlist in
angularjs, mvc radiobuton list in angularjs, radiobuttonlist in angularjs from database