Angular JS directive for dropdown with multi-select feature.
npm install angular-dropdown-multiselect#Dependencies
AngularJS, Bootstrap
#Usage
Include both .css and .js files in index.html.
``html`
Inject dropdown-multiselect as your angular app dependencies.
`javascript`
angular.module( 'App', [ 'dropdown-multiselect' ] );
#Features
Use as an element
html
`
or as an attribute
html
`Provide custom name to the dropdown
html
My Custom Name
`
If no text is provided, it will default to text as Select.Settings through attribute:
dropdown-options
Provide data to be displayed as dropdown list items through dropdown-options="options" attribute. It can accept the object in a format of:
javascript
$scope.options = [ {
'Id': 1,
'Name': 'Batman'
}, {
'Id': 2,
'Name': 'Superman'
}, {
'Id': 3,
'Name': 'Hulk'
}];
`
HTML:
html
`dropdown-trackby
Initially, dropdown items are tracked by Id automagically, 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.
Controller:
javascript
var options = [ {
'Name': 'Batman',
'Costume': 'Black'
}, {
'Name': 'Superman',
'Costume': 'Red & Blue'
}, {
'Name': 'Hulk',
'Costume': 'Green'
}];
`
HTML:
html
`
It is always better to provide dropdown-trackby attribute for correct tracking.
dropdown-disable
Dropdown could be disabled by providing boolean value to dropdown-disable attribute.
HTML:
html
`
Or through the Controller:
javascript
$scope.dropdownDisable = true;
`
and then in HTML:
html
`model
The model attribute gives the accessibility to the selected data from the dropdown which will be available to the view and the controller.HTML:
html
Selected Items = {{selectedItems | json}}
`Controller:
javascript
//Binding to the controller
var mySelectedValues = $scope.selectedItems;
`Set through config in Controller:
Configure the options from the controller to set dropdown-config.
NOTE: When dropdown-config is being used, it will overwrite dropdown-options and dropdown-trackby attribute, if in use.
Available config options:
options,
trackBy,
displayBy,
divider,
icon,
displayBadge,
height,
filter
options:
Data to be displayed in dropdown list. This should be an array of objects.
trackBy:
Any property name from the option object that should be used for tracking the selected item.
displayBy:
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.
divider:
A custom divider sign setter -, : , =, # ,...... between the dropdown list columns. Default is -.
icon:
A custom icon setter for the selected items. Works with Font-Awesome too. Default is Bootstrap's glyphicons checkmark.
displayBadge:
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:
Height of the scrollable item list in a dropdown-box, in pixel. Default height is set to 200px.
filter:
Filter/search items from the dropdown list. Default visibility is false, but could be set to true.
Controller:
javascript
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
};
`HTML:
html
``