angular-dropdown-multiselect

Angular JS directive for dropdown with multi-select feature.

Dependencies

AngularJS, Bootstrap

Usage

Include both .css and .js files in index.html.

<link rel="stylesheet" href="angular-dropdownMultiselect.css">
<script src="angular-dropdownMultiselect.js"></script>

Inject dropdown-multiselect as your angular app dependencies.

angular.module( 'App', [ 'dropdown-multiselect' ] );

Features

Use as an element

```html ```

or as an attribute

```html

```

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:

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:

$scope.dropdownDisable = true;

and then in HTML:

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

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 = {{selectedItems | json}} </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.

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:

trackBy:

displayBy:

divider:

icon:

displayBadge:

height:

filter:

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

HTML:

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

Tested with