Please disable your adblock and script blockers to view this page
 

AngularJS: Bind DropDownList value and text using ng-repeat

Introduction: In this article I am going to explain how to populate HTML dropdown list using ng-repeat in AngularJs.
Populate DropDownList value and text using ng-repeat
In previous articles i explained How to populate dropdownlist using ng-options and Maintain bootstrap selected tab on postback in asp.net inside ajax updatepanel and 
Implementation: Let’s create a test page for demonstration purpose:
<html>
<head>
    <title>Bind DropDown in 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'
            }];
        });
    </script>

    <div ng-app="testapp" ng-controller="testcontroller">
       <fieldset style="width:270px; height:150px;">
           <legend>Bind DropDownList in AngularJS</legend>      
         Select Book:
        <select>
            <option value='0'>-Select-</option>
            <option ng-repeat="Book in BookList" value="{{Book.Bookid}}">{{Book.Bookname}}</option>
        </select>
        </fieldset>
    </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. 
Previous
Next Post »

2 comments

Click here for comments
June 21, 2016 ×

Nice Blog, but try to give an example with from database itself. Means I am trying to say how to show the records from the database table to dropdownlist in angular js.

Reply
avatar
August 18, 2016 ×

Thanks for you feedback..I am glad you liked this article..I will write an article as per your suggestion very soon.stay connected and keep reading...

Reply
avatar

If 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.. ConversionConversion EmoticonEmoticon