Angular JS directive for dropdown with multi-select feature.
https://plnkr.co/edit/KpVqaiblOKGk5K6VWmi4?p=previewAngularJS, Bootstrap
Include both .css and .js files in index.html.
<link rel="stylesheet" href="angular-dropdownMultiselect.min.css">
<script src="angular-dropdownMultiselect.min.js"></script>Inject dropdown-multiselect as your angular app dependencies.
angular.module( 'App', [ 'dropdown-multiselect' ] );Use as an element
<dropdown-multiselect></dropdown-multiselect>or as an attribute
<div dropdown-multiselect ></div>Provide custom name to the dropdown
<dropdown-multiselect>My Custom Name</dropdown-multiselect>If no text is provided, it will default to text as Select.
Provide data to be displayed as dropdown list items through dropdown-options="options" attribute. It can accept the object in a format of:
$scope.options = [ {
'Id': 1,
'Name': 'Batman'
}, {
'Id': 2,
'Name': 'Superman'
}, {
'Id': 3,
'Name': 'Hulk'
}];HTML:
<dropdown-multiselect dropdown-options="options"></dropdown-multiselect>Initially, dropdown items are tracked by Id automagically (considering "Id" property is present in all objects in an array), if the dropdown-trackby attribute is not set.
If the option objects does not have Id property, then custom tracking could be set by providing any of the property of an object from the options data.
var options = [ {
'Name': 'Batman',
'Costume': 'Black'
}, {
'Name': 'Superman',
'Costume': 'Red & Blue'
}, {
'Name': 'Hulk',
'Costume': 'Green'
}];HTML:
<dropdown-multiselect dropdown-options="options" dropdown-trackby="Name"></dropdown-multiselect>NOTE: It is always better to provide dropdown-trackby attribute for correct tracking, when dropdown-options is being used.
Dropdown could be disabled by directly providing boolean value to dropdown-disable attribute.
<dropdown-multiselect dropdown-options="options" dropdown-disable="true"></dropdown-multiselect>Or through the Controller:
$scope.dropdownDisable = true;and then in HTML:
<dropdown-multiselect dropdown-options="options" dropdown-disable="dropdownDisable"></dropdown-multiselect>model attribute gives the accessibility to the selected data from the dropdown which will be available to the view and the controller.
HTML:
<!--Binding to the view-->
<dropdown-multiselect dropdown-options="options" dropdown-trackby="Id" model="selectedItems"></dropdown-multiselect>
<div> Selected Items = {{selectedItems | json}} </div>Controller:
//Binding to the controller
var mySelectedValues = $scope.selectedItems;Configure the options from the controller to set dropdown-config attribute.
NOTE: When dropdown-config is being used, it will overwrite dropdown-options and dropdown-trackby attribute, if in use. Therefore, it's better to use just one at a time.
Available config options:
options,
trackBy,
displayBy,
divider,
icon,
displayBadge,
height,
filter,
multiSelect,
preSelectItem,
preSelectAll
Controller:
var options = [ {
'Id': 1,
'Name': 'Batman',
'Costume': 'Black'
}, {
'Id': 2,
'Name': 'Superman',
'Costume': 'Red & Blue'
}, {
'Id': 3,
'Name': 'Hulk',
'Costume': 'Green'
}];
$scope.config = {
options: options,
trackBy: 'Id',
displayBy: [ 'Name', 'Costume' ],
divider: ':',
icon: 'glyphicon glyphicon-heart',
displayBadge: true,
height: '200px',
filter: true,
multiSelect: false,
preSelectItem: true,
preSelectAll: false
};HTML:
<dropdown-multiselect dropdown-config="config" ></dropdown-multiselect>Data to be displayed in dropdown list. This should be an array of objects.
Any property name from the option object that should be used for tracking the selected item.
An array that takes two values which will be used as data to be displayed in dropdown list, in a respective order. If it is not set, then it will automagically set the first two prooperty names as the values to be displayed.
A custom divider sign setter -, : , =, # ,...... between the dropdown list columns. Default is -.
A custom icon setter for the selected items. Works with Font-Awesome too. Default is Bootstrap's glyphicons checkmark.
Badge on the dropdown button that displays the total number of selected items from the dropdown list. Default visibility is true, but could be set to false.
Height of the scrollable item list in a dropdown-box, in pixel. Default height is set to 200px.
Filter/search items from the dropdown list. Default visibility is false, but could be set to true.
Turn multi-select list items "on" or "off". Default is true, but could be turned "off" by setting false.
Allow pre-selecting of selected list items on load. Just add in preSelectItem: true config option property, alonng with passing selected: true property to the object that needs to be pre-selected while setting up the config options.
var options = [ {
'Id': 1,
'Name': 'Batman',
'Costume': 'Black',
'selected': true // this will pre-select this option
}, {
'Id': 2,
'Name': 'Superman',
'Costume': 'Red & Blue'
}, {
'Id': 3,
'Name': 'Hulk',
'Costume': 'Green'
}];
$scope.config = {
options: options,
trackBy: 'Id',
displayBy: [ 'Name', 'Costume' ],
divider: ':',
icon: 'glyphicon glyphicon-heart',
displayBadge: true,
height: '200px',
filter: true,
multiSelect: true, // ('multiSelect' also has to be set to 'true')
preSelectItem: true, // allowing pre-select (this has to be set to 'true')
};Turn pre-selecting of all list items "on" or "off" on load. Default is false, but could be turned "on" by setting true.
NOTE: For pre-select-all to work, multiSelect option must be set to true.
$scope.config = {
options: options,
trackBy: 'Id',
displayBy: [ 'Name', 'Costume' ],
divider: ':',
icon: 'glyphicon glyphicon-heart',
displayBadge: true,
height: '200px',
filter: true,
multiSelect: true, // ('multiSelect' also has to be set to 'true')
preSelectAll: true // allowing pre-select-all
};Compatible with
MIT