Get Selected Value from Dropdownlist in Angularjs

By: Suresh Dasari Feb 17, 2015

Introduction:

Here I will explain how to get selected value from dropdown list in AngularJS or get dropdown list selected value using AngularJS. To get dropdownlist selected value in AngularJS we will use ng-model option to get selected value.

Description:

In previous articles I explained bind dropdownlist in angularjs, Angularjs convert lower case to upper case while typing text, Angularjs refresh div for every 1 second using interval mode and many articles relating to AngularJS, jQuery, JavaScript and asp.net. Now I will explain how to get dropdownlist selected value using AngularJS.

To get dropdownlist selected value we can use ng-model option in AngularJS like as shown below

<option value="">--Select--</option>

</select><br />

Selected Value is: {{ddlvalue}}

If you want to check it in complete example you need to write the code like as shown below

<head>

<title>get selected value from dropdownlist in angularjs</title>

var app = angular.module('sampleapp', [])

app.controller('samplecontrol', function ($scope) {

$scope.sample = [{

id: '1',

}, {

id: '2',

}, {

id: '3',

}, {

id: '4',

}, {

id: '5',

}, {

id: '6',

}];

});

</script>

</head>

Select Name:

<option value="">--Select--</option>

</select><br />

Selected Value is:{{ddlvalue}}

</form>

</body>

</html>

Live Demo

To check live demo try to change below sample dropdownlist value

If you enjoyed this post, please support the blog below. It's FREE!

Get the latest Asp.net, C#.net, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email.

Subscribe by RSS

Subscribe by Email

6 comments :

Anonymous said...: It is nice but I want to know about when clicking on selected item in dropdownlist how another dropdownlist comes? Any help will be appreciable.; March 29, 2015 at 12:00 PM
Unknown said...: good one..; April 28, 2015 at 4:19 AM
Unknown said...: could you please tell me. how add multiple names and save it in database using angular js?

i've a dropdownlist, i want to select 4 different values from 4 different dropdownlist and save it in database..!!

if it is possible means please teach me or give me code...

thanks in advance..!!!!; May 26, 2015 at 1:53 AM
Unknown said...: could you please tell me. how add multiple names and save it in database using angular js?

i've a dropdownlist, i want to select 4 different values from 4 different dropdownlist and save it in database..!!

if it is possible means please teach me or give me code...

thanks in advance..!!!!; May 26, 2015 at 1:53 AM
Unknown said...: The Best and Simplest way ----------->

select data-ng-model="region" >

option ng-value="op" data-ng-repeat="op in ['Option 1','Option 2','Option 3','Option 4']" >{{op}}
/option>

/select>

For the selected option, set default option in controller

$scope.region = 'Option 1';; June 15, 2016 at 3:37 AM
Umesh said...: Hi Suresh,
I am using your code but before "--Select--" option, I am getting blank space. Wahts the reason behind this, can you suggest. I am populating data (Id & name as columns) from database.; November 22, 2016 at 1:35 AM