How to work with the Bootstrap DropDown in AngularJS

Read full article on the Infragistics blog

In this post we will learn how to work with the Bootstrap dropdown in an AngularJS APP. In a step by step by approach, we’ll cover how to:

  1. Bind a dropdown with the controller;
  2. Select an item in the drop down and pass to controller;
  3. Bind a dropdown with the Web API

Bootstrap dropdown

A simple bootstrap dropdown button can be created as shown in the listing below:

image

In the dropdown we’ve created above, we will be navigated to another view or page on selecting an item and all the items are hard coded in the dropdown.

Bootstrap dropdown with AngularJS controller data

Now let us assume that we need to create a bootstrap dropdown in the AngularJS application. To create that, first we need to make sure that the reference of bootstrap CSS is added in the project, as shown in the listing below:

image 

Next let us create AngularJS controller. In the controller there is an array called subjects which will be bound to the bootstrap dropdown. The controller can be created as shown in the listing below:

image

Read full article on the Infragistics blog

Published by

Dhananjay Kumar

Dhananjay Kumar is Developer Evangelist for Infragistics. He is a 8 times Microsoft MVP and well respected Developer Advocate in India.He is the author of 900+ Blog Posts, and can often be found speaking around India at conferences and hosting free workshops for programmers across the country. So far, he has hosted 60 free workshops on various topics like JavaScript, Angular, WCF, ASP.NET MVC, C#, Azure etc. Follow him on twitter @debug_mode for all the updates about his blog posts and workshops. You can send him email at debugmode [at] outlook [dot] com

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s