Post
Ask Question

Set Default Selected Item For Drop-Down and Radio Button List Using Angular

For dropdown

In Listing 1 I am using ng-app, ng-controller, ng-model, ng-options, ng-change AngularJS directives.
HTML control div consists Select dropdown which is populated from JSON array countryList using ng-options.
In the scope of Angular controller "drpCountryController" ng-model " selectedCountry " is set with 2 like $scope.selectedCountry = 2;

Sample Code
  1. <script>  
  2.     var app = angular.module('App', []);  
  3.     app.controller('drpCountryController',function($scope)  
  4.     {  
  5.          $scope.selectedCountry = 2;  
  6.             $scope.countryList = [{ " Name ": "India", "Id": 1 },   
  7.         { "Name": "Nepal", "Id": 2 },   
  8.         { " Name ": "Pakistan", "Id": 3 }]           
  9.     $scope.drpChange= function()  
  10.             {$scope.SelectedItemDetails = $scope.selectedCountry; }      
  11. });  
  12. </script>  

HTML

  1. <body ng-app="App">  
  2.     <div ng-controller="drpCountryController">  
  3.          Employee List<select ng-model="selectedCountry" ng-options="country.Id as   country.Name for country in countryList" ng-change="drpChange()"></select>  
  4.         <br /><br />  
  5.         <span>{{SelectedItemDetails}}</span>  
  6.     </div>  
  7. </body>  

The output looks like Figure 1.

 
Figure 1 

For Radio button list

In Listing 2 I am using ng-app, ng-controller, ng-model, data-ng-repeat, ng-checked AngularJS directives.

Html control div consists level and radio type input HTML control which is populated from JSON array countryList using data-ng-repeat.

In the scope of Angular controller "rdiobuttonlist" ng-checked is set with 2 like

ng-checked= "{{country.value==2}}".

Listing 2
  1. <script>  
  2.     var app = angular.module('App', []);  
  3.      app.controller('rdiobuttonlist', function ($scope) {  
  4.             $scope.countryList = [{ " Name ": "India", "Id": 1 },   
  5.         { "Name": "Nepal", "Id": 2 },   
  6.         { " Name ": "Pakistan", "Id": 3 }]  
  7.     });  
  8. </script>  
Html
  1. <body ng-app="App">  
  2. <div ng-controller="rdiobuttonlist" style="background-color:lightgray;padding-left:50px">  
  3.    <label data-ng-repeat="country in countryList">  
  4.        <input type="radio" name="radio2" ng-checked="{{country.Id==2}}"  style="margin:0px 5px 0px 10px;"    value="{{country.Id}}"/>{{country.Name}}  
  5.    </label>  
  6.  </div></body>  

 The output looks like Figure 2

 
Figure 2 

Summary

In this article, I discussed how to set default selected item in the drop-down and how to set the default selected item in radio button list using Angular.