angular-dropdown-multiselect

Angular JS directive for dropdown with multi-select feature.

Demo

https://plnkr.co/edit/KpVqaiblOKGk5K6VWmi4?p=preview

Dependencies

AngularJS, Bootstrap

Usage

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' ] );

Features

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.

Settings through attribute:

i. 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:

$scope.options = [ {
        'Id': 1,
        'Name': 'Batman'
    }, {
        'Id': 2,
        'Name': 'Superman'
    }, {
        'Id': 3,
        'Name': 'Hulk'
    }];

HTML:

<dropdown-multiselect dropdown-options="options"></dropdown-multiselect>

ii. dropdown-trackby

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.

Controller:

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.

iii. dropdown-disable

Dropdown could be disabled by directly providing boolean value to dropdown-disable attribute.

HTML:

<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>

iv. 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:

    <!--Binding to the view-->
    <dropdown-multiselect dropdown-options="options" dropdown-trackby="Id" model="selectedItems"></dropdown-multiselect>

    <div> Selected Items =  </div>

Controller:

    //Binding to the controller
    var mySelectedValues = $scope.selectedItems;

Set through config in Controller:

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

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.

multiSelect:

Turn multi-select list items "on" or "off". Default is true, but could be turned "off" by setting false.

preSelectItem:

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.

preSelectAll:

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.