IVH Mutli Select

A simple, performant multi select component for AngularJS apps.

Go to the code »

First, A Demo

The demo at right shows an, ever so slightly more than minimal, application of IVH Mulit Select.

By default the directive uses Selection Model to track selections. Here we're also using a filter provided by IVH Multi Select to persist selection changes to an array of item Ids.

You've selected: {{silly.selectedIds | ivhPluckAndJoin:'.'}} Nothng yet.

{{silly.selectedIds.length}} silly item(s) selected
<p>You've selected:
  {{silly.selectedIds | ivhPluckAndJoin:'.'}}
  <em ng-hide="silly.selectedIds.length">
    Nothng yet.
  </em>
</p>

<div ivh-multi-select
     ivh-multi-select-items="silly.items"
     selection-model-on-change="silly.selectedIds
       | ivhMultiSelectCollect:item:'id'">
  {{silly.selectedIds.length}} silly item(s) selected
</div>

Why IVH Multi Select?

The goal of IVH Multi Select is to provide a simple yet elegant multi select component while keeping a close eye on performance.

Sometimes you need to present a large list of items to your user. That doesn't mean you should have to create tons and tons of watcher's that end up bogging down your UI. By design IVH Multi Select will creates the same number of watchers for all closed menus - it's one of our unit tests. Even active menus (with paging) have a hard cap on watcher counts (~50) regardless of the number of items in your list.

IVH Multi Select uses Bootstrap styles. Multi select menus will be styled to match your Bootstrap app without any extra effort.

More

The the project README for more information and examples.