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

Angularjs Get Dropdownlist Selected Value & Text with ng-change Event Example

Jul 15, 2015
Introduction

Here I will explain how to use
AngularJS to get dropdownlist selected value and text using ng-change event with example or use dropdown list ng-change event to get selected value and text using AngularJS with examples. By using ng-model property in AngularJS we can get dropdownlist selected value and text in ng-change event.

Description:
  
In previous articles I explained Angularjs ui grid cell template click event,
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 and text in ng-change event using AngularJS.

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


$scope.getselectval = function () {
$scope.selectedvalues= 'Name: ' + $scope.selitem.name + ' Id: ' + $scope.selitem.id;
}

Select Name: <select ng-options="s.name for s in sample" ng-model="selitem" ng-change="getselectval()">
<option value="">--Select--</option>
</select>
<p> {{selectedvalues}}</p>

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 Dropdownlist Selected value and text 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'
}];

$scope.getselectval = function () {
$scope.selectedvalues= 'Name: ' + $scope.selitem.name + ' Id: ' + $scope.selitem.id;
}
});
</script>
</head>
<body data-ng-app="sampleapp" data-ng-controller="samplecontrol">
<form id="form1">
Select Name: <select ng-options="s.name for s in sample" ng-model="selitem" ng-change="getselectval()">
<option value="">--Select--</option>
</select>
<p> {{selectedvalues}}</p>
</form>
</body>
</html>

Live Demo

To check live demo try to change below sample dropdownlist value

Select Name:

{{selectedvalues}}

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

4 comments :

Ankush said...

nice article

Javier Iglesias said...

muy bueno

Anonymous said...

i want to pupulte data from db...i have written function as $http({
method: 'GET',
url: '/Home/getAllCountries'
}).then(function (data) {
alert(data);
$scope.sample = data.data;
}, function () {
alert('Error');
});

but not working...pls try to resolve

Anonymous said...

i want proper database using web api arltical.

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.