How to create Cascading Dropdowns in Angular JS using Web API

Posted on Updated on

Angular JS is one of the famous and a ‘WoW’ making Javascript frameworks available. https://angularjs.org/ has plenty of learning resources for Angular JS. This post shows how to create cascading drop downs using Angular JS whilst showing the use of other basic features of Angular JS.

Angular JS relies heavily on angular directives which HTML extended attributes with prefix of ng-

The following sample shows a simple web application developed using Angular JS and Web API. I used the AdventureWorks2012LT database and a Web API 2. UI has two dropdowns, first one shows the product categories and when a category is selected the second one shows the products for that particular category.

http://localhost/ADLTService/api/productcategory – to get the product categories

http://localhost/ADLTService/api/productforcategory/{id} – to get the products for a category id.

Create a simple HTML project and add Angular from NuGet. The below code shows the app script.

thuruinhttp.wordpress.com

The below is my HTML

thuruinhttp.wordpress.com

ng-repeat directive loops through the collection and creates the <options> tag for us. ng-model binds the value to the parameter in ng-change event. Here the name should be identical. The rest Angular knows how to interpret. Cascading drop down simple as that. You can also use ng-options as a directive for the <select> for more details refer this article.

Working Model.

angular cascading drop down

Advertisements

4 thoughts on “How to create Cascading Dropdowns in Angular JS using Web API

    helibertoarias said:
    March 25, 2015 at 2:07 AM

    Thanks, works for me!!

    Ihemegbulam Promise said:
    May 18, 2015 at 7:51 PM

    How do you achieve this inside an ng-repeat

    Thuru said:
    June 2, 2015 at 11:07 AM

    @Ihemegbulam : I’ve used ng-repeat here, since the categories and products are registered in $scope we can access them in the html. ng-repeat is a foreach directive.

    Viren said:
    April 27, 2016 at 6:44 PM

    I was searching for having this same functionality with AngularJS 2 but didn’t find anything. Then I come across this article. Thought of sharing with you.

    http://www.talkingdotnet.com/cascading-dropdown-select-list-using-angular-js-2/

Comments are closed.