Static RadiobuttonList in AngularJs

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,value,ngname, ngchange , ngValue

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.

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