Hello Friends, In this tutorial In this tutorial you are going to learn how to Bind Dropdownlist using Angular JS. I am using ASP.NET MVC framework to develop this application.

After completing this tutorial you will be able to understand:

  • How to Bind Dropdownlist using Angular Js in ASP.NET MVC.

Introduction:

In this session, we will learn how to Bind Dropdownlist using Angular Js. We have already discussed on Angular Js in our previous tutorials. This session will tell you how to use Angular Js to Bind Dropdownlist.

Bind Dropdownlist

How to Bind Dropdownlist using Angular Js in ASP.NET MVC?

Step 1- Open Visual Studio and Create an ASP.NET MVC  application called BindDropdownlist.

Step 2- Choose an empty template and Click on OK button. An empty solution will be created as in below snapshot.

 

Bind Dropdownlist

Step 3- Right Click on the Controller folder and Add a Controller called HomeController.

Bind Dropdownlist

Step 4- Enter Name HomeController in the Name Textbox.

Bind Dropdownlist

Step 5- Right Click on the Index Action Result and Click on the Add View option.

Bind Dropdownlist

Enter Index in the View Name textbox and Click on the Add button.

Bind Dropdownlist

Step 6- Right Click on the Solution Explorer and Create a folder AppJs.

Step 7- Create a JavaScript file called App .js and write the following code in App.Js file.

var app = angular.module('BindDropdownlistApp', [])
app.controller('EmployeeBindcontrol', function ($scope) {
 $scope.Employees = [
 {
 Id: '1',
 Name: 'Vinod Palne'
 },
 {
 Id: '2',
 Name: 'Dheeraj Gupta'
 }, {
 Id: '3',
 Name: 'Abhishek Singh'
 }, {
 Id: '4',
 Name: 'Ritwik Singh'
 }, {
 Id: '5',
 Name: 'Manish Singh'
 },
 {
 Id: '6',
 Name: 'Ashutosh Singh'
 }
 ];
});

Step 8- Goto Index.cshtml file and write the following code.

@{
 ViewBag.Title = "Index";
}


<html>
<head>
 <title>
 Bind Dropdownlist using Angular Js


 </title>
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
 <script src="~/AppJs/app.js"></script>

</head>
<body data-ng-controller="EmployeeBindcontrol" data-ng-app="BindDropdownlistApp">
 <form id="Form">
 Select Name:
 <select>
 <option data-ng-repeat="emp in Employees" value="{{emp.Id}}">{{emp.Name}}</option>
 </select>
 </form>

</body>
</html>

Run the application and look over the output window.

Bind Dropdownlist

You can download the complete source code for the application from here.

Conclusion:

Hope you understand how to Bind Dropdownlist using Angular Js in ASP.NET MVC.

View More:

Thank You.

4 Comments

  • I simply had to thank you very much once again. I’m not certain what I would have carried out without those suggestions shown by you about my field. It had been the depressing concern in my view, however , being able to view the well-written approach you processed it took me to leap over delight. Now i am happier for the work as well as believe you find out what a great job you were undertaking educating some other people with the aid of your webpage. Most probably you haven’t come across all of us.

  • It’s a pity you don’t have a donate button! I’d most certainly donate to this outstanding blog! I guess for now i’ll settle for bookmarking and adding your RSS feed to my Google account. I look forward to fresh updates and will share this blog with my Facebook group. Chat soon!