Custom DropDown Control Using Bootstrap and AngularJS

When we want to develop a web-based application using AngularJs, it often requires a dropdown control with some extra features like search text and so on. But like classic ASP.NET, always a ready-made control is not available in the AngularJs Framework. But actually, if we want to create a custom dropdown control, we can create it easily. Using this article, we will learn how to create a custom dropdown control.

For that, we will first open Visual Studio and create a blank ASP.NET web application. We then need to install some Nuget packages such as AngularJs, Bootstrap and Angular UI.

Now create a HTML file named DropDown.html. It is the template file for the dropdown directive. In this file, add the following code:

<div class="btn-group" dropdown is-open="status.isopen" style="width:{{DropDownParam.Width}};">
<div style="float:left;width:100%;">
<input type="text" class="form-control" style="width:90%;" ng-disabled="DropDownParam.Disabled"
id="{{TextControlID}}" placeholder="{{DropDownParam.placeholder}}" value="{{SelectText}}"
ng-model="SelectText" ng-change="toggleDropdown();" ng-model-options="{debounce:1000}">
<button type="button" class="btn btn-primary dropdown-toggle" dropdown-toggle ng-disabled="DropDownParam.Disabled"
id="{{ButtonControlID}}" ng-click="fnShowDropDown();">
<span class="caret"></span>
</button>
</div>
<ul class="dropdown-menu" role="menu" style="height:{{DropDownParam.height}};overflow:auto;overflow-x:hidden;width:95%;">
<li ng-repeat="item in DropDownParam.source | filter: {Text : SelectText}" data-ng-click="selectItem(item)">
<a><span tabindex="-1" style="cursor:pointer;" data-ng-click="selectItem(item)">{{item.Text}}</span></a>
</li>
</ul>
</div>

Now add another file named "DemoDropDown.html" that shows the functionality of the dropdown control. In that file, we will use the reference of Angular.min.js file and bootstrap.js file. Also, we will use the reference of the bootstrap.css file. Provide the following code in this HTML file:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Drop Down Demo</title>
<script src="../RefScript/angular.min.js"></script>
<script src="../RefScript/ui-bootstrap.min.js"></script>
<script src="../PageScript/CustomCtrlApp.js"></script>
<script src="../DirectiveScript/DropDown.js"></script>
<script src="../PageScript/DropDownDemo.js"></script>
<link href="../RefStyle/bootstrap.min.css" rel="stylesheet" />
</head>
<body ng-app="CustomCtrlApp">
<div ng-controller="DropDownDemo">
<h2>{{Heading1}}</h2>
<div>
<table style="width:100%;column-span:all;" cellpadding="5" cellspacing="10" >
<tr>
<td style="width:40%;">Basic Drop Down </td>
<td style="width:60%;"><ng-drop-down dropdown-setting="ComboSetting" callbackfunction="fnChange"></ng-drop-down></td>
</tr>
<tr>
<td colspan="2">
<span>Select Item : {{SelectText}}</span>
</td>
</tr>
<tr>
<td colspan="2">
<input type="button" value="Get Text" ng-click="fnGetText();" />
<input type="button" value="Get Text" ng-click="fnGetValue();" />
<input type="button" value="Clear Selection" ng-click="fnClearItem();" />
<input type="button" value="Clear Combo" ng-click="fnClear();" />
<input type="button" value="Enable Combo" ng-click="fnEnable(true);" />
<input type="button" value="Disable Combo" ng-click="fnEnable(false);" />
</td>
</tr>
<tr>
<td><input type="text" ng-model="SetValue" /></td>
<td>
<input type="button" value="Set Item by Value" ng-click="fnSetItem();" />
<input type="button" value="Set Item by Index" ng-click="fnSetIndex();" />
</td>
</tr>
</table>
</div>
</div>
</body>
</html>

Now it's time to add our own JavaScript file.

First, we need to create an Angular App file named "CustomCtrlApp.Js" and add the following code:

var CustomCtrlApp = angular.module('CustomCtrlApp', ['ui.bootstrap']);

Now we will add another JavaScript file named "DropDown.js" that is the controller file of the dropdown directive to define the attribute, events and methods of the dropdown control.

CustomCtrlApp.directive("ngDropDown", [function () {
this;
return {
restrict: "EA",
scope: {
DropDownSetup: '=dropdownSetting',
callbackfunction: '='
},
templateUrl: '../HTMLTemplate/DropDown.html',
controller: function ($scope, $element, $attrs) {
$scope.DropDownParam = $scope.DropDownSetup.attribute;
$scope.TextControlID = "txt" + $scope.DropDownSetup.attribute.id;
$scope.ButtonControlID = "btn" + $scope.DropDownSetup.attribute.id;
$scope.showDropDown = false;
$scope.SelectText = '';
if ($scope.DropDownParam.Width != #ff0000) {
var width = $scope.DropDownParam.Width.substr(0, $scope.DropDownParam.Width.length - 1);
$scope.BoxWidth = Math.round(width * 0.95, 0) + '%';
}
else {
$scope.BoxWidth = '95%';
}
if ($scope.DropDownParam.Enabled != undefined) {
$scope.DropDownParam.Disabled = !$scope.DropDownParam.Enabled;
}
else {
$scope.DropDownParam.Disabled = false;
}
if ($scope.DropDownSetup.events == undefined) {
$scop.DropDownSetup.events = {};
}
$scope.fnShowDropDown = function () {
if ($scope.DropDownParam.source.length > 0) {
$scope.showDropDown = !$scope.showDropDown;
}
else {
$scope.showDropDown = false;
}
}
$scope.selectItem = function (item) {
$scope.SelectText = item.Text;
$scope.DropDownSetup.attribute.Text = item.Text;
$scope.DropDownSetup.attribute.Value = item.Value;
$scope.showDropDown = false;
$scope.DropDownSetup.events.selectedIndexChange(item);
}
function assignDropDownMethod() {
$scope.DropDownSetup.method = {
clearSelection: function () {
$scope.SelectText = '';
},
clear: function () {
$scope.DropDownParam.source = '';
$scope.SelectText = '';
},
selectItemByValue: function (value) {
var result_obj = objectFindByKey($scope.DropDownParam.source, 'Value', value);
if (result_obj != null) {
$scope.selectItem(result_obj);
}
},
selectItemByIndex: function (index) {
var result_obj = $scope.DropDownParam.source[index];
if (result_obj != null) {
$scope.selectItem(result_obj);
}
},
setEnable: function (param) {
$scope.DropDownParam.Disabled = !param;
}
}
}
assignDropDownMethod();
function objectFindByKey(array, key, value) {
for (var i = 0; i < array.length; i++) {
if (array[i][key] === value) {
return array[i];
}
}
return null;
}
$scope.fnHideDropDown = function () {
$scope.showDropDown = false;
}
$scope.status = {
isopen: false
};
$scope.toggleDropdown = function () {
if ($scope.DropDownParam.source.length > 0) {
$scope.showDropDown = !$scope.showDropDown;
$scope.status.isopen = !$scope.status.isopen;
}
else {
$scope.showDropDown = false;
$scope.status.isopen = false;
}
};
}
}
}]);

Now we need to add another JavaScript file named "DropDownDemo.js" file as the controller file of the demo HTML file. In that file, we will provide all the required attributes including the data source of the dropdown control and call the various methods of the dropdown control including enable or disable and so on.

CustomCtrlApp.controller("DropDownDemo", ['$scope', '$http',
function ($scope, $http) {
$scope.Heading1 = "Static Drop Down Control";
$scope.ComboSetting = {};
$scope.SetValue = "";
var comboSource1 = [{ Text: "Item1", Value: "1" },
{ Text: "System", Value: "2" },
{ Text: "Sweet", Value: "3" },
{ Text: "Titan", Value: "4" },
{ Text: "Bimal", Value: "5" },
{ Text: "Swapan", Value: "6" },
{ Text: "Item4", Value: "7" }];
$scope.ComboSetting.attribute = {
Width: '50%',
Enabled: true,
SearchMode: true,
id: 'cmb1',
placeholder: 'Custom Combo',
source: comboSource1,
height: '200px'
};
$scope.fnChange = function (args) {
$scope.SelectText = args.Text;
}
if ($scope.ComboSetting.events == undefined) {
$scope.ComboSetting.events = {};
}
$scope.ComboSetting.events.selectedIndexChange = function (args) {
$scope.SelectText = args.Text;
}
$scope.fnGetText = function () {
alert($scope.ComboSetting.attribute.Text);
}
$scope.fnGetValue = function () {
alert($scope.ComboSetting.attribute.Value);
}
$scope.fnClearItem = function () {
$scope.ComboSetting.method.clearSelection();
}
$scope.fnClear = function () {
$scope.ComboSetting.method.clear();
}
$scope.fnSetItem = function () {
$scope.ComboSetting.method.selectItemByValue($scope.SetValue);
}
$scope.fnSetIndex = function () {
$scope.ComboSetting.method.selectItemByIndex($scope.SetValue);
}
$scope.fnEnable = function (args) {
$scope.ComboSetting.method.setEnable(args);
}
}]);

Now our code is complete. Run the project and check the output here.

12 Comments

Join the conversation! Your thoughts help the community grow.

Sr Karthiga10y ago
Nice explanation
Sharad11y ago
good one...
Jacob Robinson11y ago
Great..
Debasis Saha11y ago
Thanks for the comment
Ankit Bansal11y ago
nice article...
Rahul Kumar Saxena11y ago
Good show
Gopi Chand11y ago
Great :)
Santhakumar Munuswamy11y ago
Thanks for nice article:)
Pankaj Kumar Choudhary11y ago
Nice One Sir..........
Sibeesh Venu11y ago
Good one.
Debendra Dash11y ago
nice.........
Rakesh11y ago
Good one sir