How to work with the Bootstrap DropDown in AngularJS

Dhananjay Kumar / Monday, June 29, 2015

In this post, we will learn how to work with the Bootstrap dropdown in an AngularJS APP with the help of one of the best Angular Component Libraries out there. In this step by step by approach we’ll cover how to:

1. Bind a drop-down with the controller;

2. Select an item in the drop-down and pass to the controller;

3. Bind a drop-down with the Web API

Bootstrap dropdown

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

Subject

button>

<li><a href="#">Physicsa>li>

<li><a href="#">Matha>li>

<li><a href="#">Chemistrya>li>

<li><a href="#">Hindia>li>

ul>

div>

In the drop-down we’ve created above, we will be navigated to another view or page on selecting an item and all the items are hardcoded in the drop-down.

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:

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

MyApp.controller('SubjectDropDownController', function ($scope) {

$scope.subjects = ['Math', 'Physics', 'Chemistry', 'Hindi', 'English'];

});

We can bind the subjects array to create a dropdown as shown in the listing below:

Subject

button>

ul>

div>

Here we’re doing the following tasks to bind the array from the AngularJS controller in the bootstrap dropdown:

1. Setting the ng-controller value to the SubjectDropDownController

2. Using the ng-repeat directive on li element to repeat the elements from the array

In the above dropdown, all the items are links which we will navigate to by clicking them. To invoke a controller function on the drop-down item click, we need to use the ng-click directive as shown in the listing below:

Subject

button>

ul>

div>

In the controller we need to create a function as shown in the listing below:

MyApp.controller('SubjectDropDownController', function ($scope) {

$scope.subjects = ['Math', 'Physics', 'Chemistry', 'Hindi', 'English'];

$scope.dropboxitemselected = function () {

alert("drop box item selected");

}

});

Selecting an Item in the Dropdown

One common requirement in the dropdown would be to select an item. There might be other ways of doing it, but I prefer to do it in a simple way as discussed in the following steps:

1. Create a variable on the $scope in the controller. Let us say the variable name is selecteditem

2. On the ng-click directive, call a function and pass the item in the function

3. Assign the item which is passed as parameter in the function to the selecteditem variable

4. Data bind the drop-down display item to the selecteditem variable

The controller can be modified as shown in the listing below:

MyApp.controller('SubjectDropDownController', function ($scope) {

$scope.subjects = ['Math', 'Physics', 'Chemistry', 'Hindi', 'English'];

$scope.selectedItem;

$scope.dropboxitemselected = function (item) {

$scope.selectedItem = item;

alert($scope.selectedItem);

}

});

And the drop down can be modified to bind the selected item as shown in the listing below:

button>

ul>

div>

Getting data from the web API

In real-time applications, we may have to bring data from the database and bind to the UI. There are various ways to expose data from the database. One of the most popular approaches is writing the Web API. If required, you may want to read A Step-by-Step Guide to Working with the ASP.NET Web API and AngularJS.

Now let’s say we have created the Web API, and in the AngularJS application, we need to create a service to work with the Web API. This can be created as shown in the listing below:

MyApp.factory('TeacherService', ['$http', function ($http) {

var urlBase = 'http://localhost:25221/api';

var TeacherService = {};

TeacherService.getSubjects = function () {

return $http.get(urlBase + '/Subjects');

};

}]);

Next, in the controller, we need to use the AngularJS service to fetch the data from the Web API. We passed TeacherService as the dependency and then called getSubjects() function of the service to fetch the data from the Web API.

MyApp.controller('SubjectDropDownController', function ($scope, TeacherService) {

//$scope.subjects = ['Math', 'Physics', 'Chemistry', 'Hindi', 'English'];

$scope.subjects;

$scope.selectedItem;

$scope.dropboxitemselected = function (item) {

$scope.selectedItem = item;

alert($scope.selectedItem);

}

getSubjects();

function getSubjects() {

TeacherService.getSubjects()

.success(function (subjects) {

$scope.subjects = subjects;

console.log($scope.subjects);

})

.error(function (error) {

$scope.status = 'Unable to load subject data: ' + error.message;

});

};

});

In this way, we can easily fetch data from the database and bind it to the bootstrap dropdown in an Angular application. I hope you found this post useful. Thanks for reading!