✖

All TalkersCode Topics

Follow TalkersCode On Social Media

✖

devloprr.com - A Social Media Network for developers Join Now ➔

How To Bind Selected Value In Dropdownlist In Angularjs

Last Updated : Mar 11, 2024

IN - Angular JS | Written & Updated By - Ashish

How To Bind Selected Value In Dropdownlist In Angularjs

In this tutorial we will show you the solution of how to bind selected value in dropdownlist 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 binding selected value in dropdown list we have option in angularjs.

Using angular directive of ng-options and ng-model we can get value of selected option in dropdown list then we needs to append that value to html element.

Step By Step Guide On How To Bind Selected Value In Dropdownlist In Angularjs :-

Here we created array of user id and name and those values appends to html element of select by ng-options and ng-model.

The ng-options directive used to build and bind html element with options to a model property.

It is used to specify <options> in a <select> list. It is designed specifically to populate the items of a dropdown list.

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 require that value. 

<!DOCTYPE html>
<html>
<head>
<title>
bind dropdown list
</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"
}];
});
</script>
</head>
<body ng-app="ngoptionsApp" ng-controller="ngoptionsCtrl">
<div>
<h3>AngularJS ng-options to bind dropdown list</h3>
<select ng-options="user.name for user in arrlist" ng-model="userselected">
<option value="">--Select User--</option>
</select><br /><br />
<span>User Name: {{userselected.name}}, UserId: {{userselected.userid}}</span>
</div>
</body>
</html>
  1. <!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.
  2. The<html> tag is used to indicate the beginning of HTML document.
  3. 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.
  4. This file contains angularjs is distributed as a javascript file and added to webpage must added by using <script> tag.
  5. 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.
  6. <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’.
  7. The ng-app directive defines an angularjs application and ng-controller used to adds a controller to our application.
  8. The <h3> tag used to describe about the concept of angularjs and we defined <select> tags with <options> for creating dropdown list.
  9. 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.
  10. ‘$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.
  11. In <select> tag we used ng-options for bind html element option to ng-model of ‘userselected’ that means in ng-options we are collected array ‘arrlist’ names by for loop so its names are added into select tag ‘options’.
  12. In <span> tag whenever user clicks on dropdown list which options clicks by user will display with respective id. Don’t forget to close all paired tags with respective in html.
  13. 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 bind selected option from dropdown list.

In angularjs we achieve this too easily but in other languages will take’s time, space and complexity.

Here our prebuilt concept of directives is helped for getting result.

Advantage is we can quickly understand angularjs because mostly similar to javascript and we will learn more topics on angularjs later in future.

I hope this tutorial on how to bind selected value in dropdownlist in angularjs helps you and the steps and method mentioned above are easy to follow and implement.