AngularJS Dropdown Default Selected Value
Last Updated : Mar 11, 2024
IN - Angular JS | Written & Updated By - Anjali
In this tutorial we will show you the solution of angularjs dropdown default selected value, as we know angularjs also same as javascript but here we need to use directives and expressions so we can achieve any process too easily.
For default selection value in dropdown list we need to use scope object and ng-repeat directive in angularjs.
Step By Step Guide On Angularjs Dropdown Default Selected Value :-
Here we created array of user id and name and those values appends to html element of select tag options.
In those objects we are going to set one value as default selection in dropdown by using scope object and ng-repeat.
The scope object used for accessing the variables and functions defined in the angularJS controller that’s way we can points values present in array to our ng-model.
The ng-repeat directive repeats a set of HTML, a given number of times. The set of HTML will be repeated once per item in a collection.
<!DOCTYPE html>
<html>
<head>
<title>
DEFAULT SELECTION
</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script>
var app = angular.module('ngoptionsApp', []);
app.controller('ngoptionsCtrl', function ($scope) {
$scope.arrlist = [{
"userid": 1,
"name": "Suresh"
}, {
"userid": 2,
"name": "Rohini"
}, {
"userid": 3,
"name": "Praveen"
}];
$scope.userselected="2";
});
</script>
</head>
<body ng-app="ngoptionsApp" ng-controller="ngoptionsCtrl">
<div>
<h3>AngularJS ng-options to bind dropdown list Example</h3>
<select ng-model="userselected">
<option value="">--Select User--</option>
<option value="{{user.userid}}" ng-repeat="user in arrlist" >{{user.name}}</option>
</select>
</div>
</body>
</html>
- <!DOCTYPE html> tag which is instruct the web browser about what version of HTML file written in and it’s not have any ending tag.
- The<html> tag is used to indicate the beginning of HTML document.
- As above shown <head> tag is contain information about webpage and external file links are declared here. <title> tag is used for set the webpage title.
- This file contains angularjs is distributed as a javascript file and added to webpage must added by using <script> tag.
- Both <head> and <title> tags having their pair end tag, so we need to close the ending tags respectively. If you’re not closed anyone of ending tag properly that is also affect the webpage result.
- <body> tag is beginning of main coding part because it contain coding of entire website blocks and elements described here. In body we added two directives namely ‘ag-app and ag-controller’ with value ‘ngoptionsApp and ngoptionsCtrl’.
- The ng-app directive defines an angularjs application and ng-controller used to adds a controller to our application.
- The <h3> tag used to describe about the concept of angularjs and we defined <select> tags with <options> for creating dropdown list.
- In <script> we defined angular module ‘ngoptionsApp’ and stored to variable ‘app’ then module needs to add controller (i.e ngoptionsCtrl). When we use controller there must $scope object present as we know.
- ‘$scope’ is the application object that means this is the owner of application variables and functions. By use this we declared array ‘arrlist’ with collection of key and values. After ends definition of arrlist we sets scope object to points array value ‘2’ and appends to our model.
- In <select> tag we defined ng-model of ‘userselected’. Ng-model which binds input, select and textarea and stores the required user value in a variable and we can use that variable whenever we required that value.
- In <option> tag whenever user refresh it default selection value sets to userid ‘2’ name ‘Rohini’. It is done by our $scope accessed the array value of ‘2’ and binds to model ‘userselected’.
- The ng-repeat directive repeats a set of HTML, a given number of times. The set of HTML will be repeated once per item in a collection. By using ng-repeat directive we can see all options from array and can make selections.
- Both </body>,</html> tags closed respectively. </body> tag indicates the end of body, Then </html> tag indicates the end of HTML document.
Conclusion :-
In conclusion now we are able to know how to set default selected option from dropdown list. In angularjs we achieve this too easily but in other languages will take’s time, space and complexity.
So here we used directives of ng-model and ng-repeat with directive object for sets dropdown default value and we can set it’s default value to anything in array list it depends on our own choice.
I hope this tutorial on angularjs dropdown default selected value helps you and the steps and method mentioned above are easy to follow and implement.
About Anjali
