Angular multiselect

Angular directive for multiselect elements with a nice UX.

Getting started

1. Download ng-multiselect.js and ng-multiselect.css and add to your project. Or get automatically:

   bower install ng-multiselect

2. Add the module to the app:

   angular.module('myApp', ['aurbano.multiselect'])

3. Profit!

Usage

Add the element in the view:

<multiselect placeholder="Select users..."
             ms-model="multiselect.selected"
             ms-config="multiselect.config"
             ms-options="multiselect.options">
</multiselect>

The parameters are:

• ms-model: The model where the selection will be stored.
• ms-config: Configuration object to customize the behavior (see below).
• ms-options: Array with options to offer.

Customization

Using the ms-config you can pass an object with the following configuration options:

• hideOnBlur: Only show the dropdown when the input is focused
• showSelected: Show the elements that have already been selected
• itemTemplate: function that takes each element from ms-options and returns what should be displayed on the list. It defaults to the element itself. Use sce.trustAsHtml if you want to add custom HTML here.
• labelTemplate: function that takes each selected element, and displays it on the label list. This goes inside the <span class="label"></span>. Use $sce.trustAsHtml() if you want to add custom HTML here.

Demo

Dynamic data

Custom formatting

Custom template

By Alejandro U. Alvarez - MIT License