Set Selected Value Of Dropdown In Angularjs
Last Updated : Mar 11, 2024
IN - Angular JS | Written & Updated By - Ashish
In this tutorial we will show you the solution of set selected value of dropdown in angularjs, 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 setting selection value to display in dropdown list we need to check which option selected from our dropdown list by using array values.
Step By Step Guide On Set Selected Value Of Dropdown In Angularjs :-
Here we created array of user id and name and those values appends to html element of select tag options.
In those array values we need to add another set of key and values for verify which option selected from the dropdown list so we added another values ‘selected’ with Boolean values.
Using that we can check in array which is selected that values changed from ‘false’ state to ‘true’ so we can display selected option from list.
<!DOCTYPE html>
<html>
<head>
<title>
SET 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",
selected: false
}, {
"userid": 2,
"name": "Rohini",
selected: true
}, {
"userid": 3,
"name": "Praveen",
selected: false
}];
});
</script>
</head>
<body ng-app="ngoptionsApp" ng-controller="ngoptionsCtrl">
<div>
<h3>AngularJS dropdown list</h3>
<select>
<option value="">--Select User--</option>
<option value="{{user.userid}}" ng-repeat="user in arrlist" ng-selected="{{user.selected == true}}">{{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 with scope object.
- 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 in array we created key ‘selected’ with value ‘false or true’.
- One option only set it to ‘true’ because anyone option needs to display on selection when user change the selection it change it selected to ‘true’ state so it will active state and displays selected option.
- 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’.
- Within <option> tag we defined ng-selected and ng-repeat. Ng-select used to sets the selected attribute of an <option> element in a <select> list. The ng-selected directive is necessary to be able to shift the value between true and false.
- 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. 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.
- 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-repeat with directive object for sets dropdown value and we can select value to anything in array list by ng-selected directive.
We can select or create any collection of values of array it depends on our own choice.
I hope this tutorial on set selected value of dropdown in angularjs helps you and the steps and method mentioned above are easy to follow and implement.
About Ashish
