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:
<divclass="dropdown">
<buttonclass="btn btn-default dropdown-toggle"type="button"id="dropdownMenu1"data-toggle="dropdown"aria-haspopup="true"aria-expanded="true">
Subject
<spanclass="caret">span>
button>
<ulclass="dropdown-menu"aria-labelledby="dropdownMenu1">
<li><ahref="#">Physicsa>li>
<li><ahref="#">Matha>li>
<li><ahref="#">Chemistrya>li>
<li><ahref="#">Hindia>li>
ul>
div>
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:
<linkhref="../Content/bootstrap.css"rel="stylesheet"/>
<scriptsrc="../Scripts/angular.js">script>
<scriptsrc="../Scripts/angular-route.js">script>
<scriptsrc="home.js">script>
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:
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:
<divng-controller="SubjectDropDownController">
<divclass="dropdown">
<buttonclass="btn btn-default dropdown-toggle"type="button"id="dropdownMenu1"data-toggle="dropdown"aria-haspopup="true"aria-expanded="true">
Subject
<spanclass="caret">span>
button>
<ulclass="dropdown-menu"aria-labelledby="dropdownMenu1">
<ling-repeat="a in subjects"><ahref="#">{{a}}a>li>
ul>
div>
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 dropdown item click, we need to use the ng-click directive as shown in the listing below:
<divng-controller="SubjectDropDownController">
<divclass="dropdown">
<buttonclass="btn btn-default dropdown-toggle"type="button"id="dropdownMenu1"data-toggle="dropdown"aria-haspopup="true"aria-expanded="true">
Subject
<spanclass="caret">span>
button>
<ulclass="dropdown-menu"aria-labelledby="dropdownMenu1">
<ling-repeat="a in subjects"><ang-click="dropboxitemselected()">{{a}}a>li>
ul>
div>
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 dropdown 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:
<divng-controller="SubjectDropDownController">
<divclass="dropdown">
<buttonclass="btn btn-default dropdown-toggle"type="button"id="dropdownMenu1"data-toggle="dropdown"aria-haspopup="true"aria-expanded="true">
{{selectedItem}}
<spanclass="caret">span>
button>
<ulclass="dropdown-menu"aria-labelledby="dropdownMenu1">
<ling-repeat="a in subjects"><ang-click="dropboxitemselected(a)">{{a}}a>li>
ul>
div>
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 approach 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 AngularJS application. I hope you found this post useful. Thanks for reading!
