How to bind Dropdown list from database using AngularJS

Hi Friends,

 

In this article i will tell you how to bind dropdown list from database using Angular JS by simple steps

 

Step 1:  Create Tables

 I have created two tables Country and State

 

Step 2 :  Install Angularjs Nuget package

Step 3: Create Controller in MVC project

 

Step 4 : Client side Code

1. Module.js

angular.module is used to configure the $injector. The module is a container for the different parts of an application





2. Service.js

Service.js file is used for calling server side code by using $http. In Service.js file we have created an AngularJS service called as myService. To call MVC HomeControllers  GetCountry, GetState function we have created three functions in service.js
We have created following method in service to Call Server Side Code

app.service("myService", function ($http) {

     

    // get Country

    this.getCountry = function () {

        var response = $http({

            method: "post",

            url: "Home/getCountry"

          

        });

        return response;

    }

    // get State

    this.getState = function () {

        var response = $http({

            method: "post",

            url: "Home/getState"

        });

        return response;

    }

   

});

3. Controller.js

In controller.js we have created new controller named myCntrl. In controller we are calling method of myService in controller.js

app.controller("myCntrl", function ($scope, myService) {

  

    var getData = myService.getCountry();

    getData.then(function (emp) {

        console.log(emp);

        $scope.countryData = emp.data;

        console.log($scope.countryData);

    },function () {

        alert('Error in getting records');

    });

    var getstateData = myService.getState();

    getstateData.then(function (state) {

        $scope.stateData = state.data;

        console.log($scope.stateData);

    },function () {

        alert('Error in getting records');

    });

});

4. Binding Dropdwon from Controller on UI

The ngOptions directive in AngularJS allows you to build and bind an HTML select element with options to a model property. It is very smarter than trying to build the select options with ngRepeat since ngOptions is optimized for two way data binding.

Step 5: Cascaded Drop down Binding

Using a filter on your collection is a powerful way to format, select a subset of data and add other logic that gets you the data you want in your select control. Here is a simple example of using a filter to reformat the display label on the select. All the code from above still applies but I will be adding a filter and changing the select’s ng-options statement.

When I change my contry I want to show State. For this cascading options angular js simply given Filter option

We have used filter option for filtering drop down. Where country is data model of country drop down

Output Screen

Please take a look at the attached code for more information. Download GoodExample.zip

Happy programming!!

Don’t forget to leave your feedback and comments below!