Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

    angular-dropdown-multiselectpublic

    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

    Alt text Alt text Alt text

    install

    npm i angular-dropdown-multiselect

    Downloadsweekly downloads

    16

    version

    1.0.1

    license

    ISC

    repository

    githubgithub

    last publish

    collaborators

    • avatar