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.

Leave a Comment