angular-dropdown-multiselect v1.0.1

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

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.

$scope.dropdownDisable = true;

and then in HTML:

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

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;

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