Introduction: In this article I am going
to explain how to populate HTML dropdown list using ng-options in AngularJs and
get selected item value and text.
In previous articles i explained How to populate dropdownlist using ng-repeat and Add textbox search functionality in asp.net checkboxlist using jquery and Bootstrap modal dialog popup example in asp.net and Check uncheck all checkboxes in asp.net gridview using jquery and Jquery to validate file type and size before uploading through asp.net fileupload control
Implementation:
Let’s create a test page for demonstration purpose:
<html>
<head>
<title>Bind DropDownlist and get selected value and text using
AngularJS </title>
</head>
<body>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module('testapp', [])
app.controller('testcontroller', function ($scope) {
$scope.BookList = [{
BookId: '1',
BookName: 'Harry Porter'
}, {
BookId: '2',
BookName: 'The lord of the rings'
}, {
BookId: '3',
BookName: 'The Hobbit'
}, {
BookId: '4',
BookName: 'The little prince'
}, {
BookId: '5',
BookName: 'Angels and Demons'
}];
$scope.GetSelectedValue = function () {
if ($scope.SelectedBook) {
$scope.selectedBookName = 'Book Name: ' +
$scope.SelectedBook.BookName;
$scope.selectedBookId = 'Book Id: ' +
$scope.SelectedBook.BookId;
}
else {
$scope.selectedBookName = 'Please select book';
$scope.selectedBookId = '';
}
}
});
</script>
<div ng-app="testapp" ng-controller="testcontroller">
<fieldset style="width: 270px; height: 150px;">
<legend>DropDownList in AngularJS</legend>
Select Book:
<select ng-options="Book.BookName for Book
in BookList" ng-model="SelectedBook" ng-change='GetSelectedValue()'>
<option value="">--Select--</option>
</select>
</fieldset>
<p>{{selectedBookId}}<br />{{selectedBookName}}</p>
</div>
</body>
</html>
Now over to you:
A blog is nothing without reader's feedback and comments. So please provide your valuable feedback so that i can make this blog better and If you like my work; you can appreciate by leaving your comments, hitting Facebook like button, following on Google+, Twitter, Linkedin and Pinterest, stumbling my posts on stumble upon and subscribing for receiving free updates directly to your inbox . Stay tuned and stay connected for more technical updates.
2 comments
Click here for commentsNice tutorial
ReplyThanks for you feedback..I am glad you liked this article..stay connected and keep reading...
ReplyIf you have any question about any post, Feel free to ask.You can simply drop a comment below post or contact via Contact Us form. Your feedback and suggestions will be highly appreciated. Also try to leave comments from your account not from the anonymous account so that i can respond to you easily..