Aspdotnet-Suresh

aspdotnet-suresh offers C#.net articles and tutorials,csharp dot net,asp.net articles and tutorials,VB.NET Articles,Gridview articles,code examples of asp.net 2.0 /3.5,AJAX,SQL Server Articles,examples of .net technologies

Get Selected Value from Dropdownlist in Angularjs

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


<select data-ng-model="ddlvalue">
<option value="">--Select--</option>
<option data-ng-repeat="t in sample" value="{{t.id}}">{{t.name}}</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


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>get selected value from dropdownlist in angularjs</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module('sampleapp', [])
app.controller('samplecontrol', function ($scope) {
$scope.sample = [{
id: '1',
name: 'Suresh Dasari'
}, {
id: '2',
name: 'Rohini Alavala'
}, {
id: '3',
name: 'Mahendra Dasari'
}, {
id: '4',
name: 'Madhav Sai'
}, {
id: '5',
name: 'Mahesh Dasari'
}, {
id: '6',
name: 'Sateesh Alavala'
}];
});
</script>
</head>
<body data-ng-app="sampleapp" data-ng-controller="samplecontrol">
<form id="form1">
Select Name:
<select data-ng-model="ddlvalue">
<option value="">--Select--</option>
<option data-ng-repeat="t in sample" value="{{t.id}}">{{t.name}}</option>
</select><br />
Selected Value is:{{ddlvalue}}
</form>
</body>
</html>

Live Demo

To check live demo try to change below sample dropdownlist value

Select Name:
Selected Value is: {{ddlvalue}}


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 RSS subscribe by email 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.

Unknown said...

good one..

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..!!!!

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..!!!!

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';

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.

Give your Valuable Comments

Note: Only a member of this blog may post a comment.

© 2015 Aspdotnet-Suresh.com. All Rights Reserved.
The content is copyrighted to Suresh Dasari and may not be reproduced on other websites without permission from the owner.