Angular Multiple Selection Module

Simplest way to make your angular items selectable

Demo Page

##Installation

###Using npm

npm install angular-multiple-selection

###Using bower

bower install angular-multiple-selection

###From source

Download source from github.com

##Usage

• Add multiple-selection.min.js file to your application

<script type="text/javascript" src="multiple-selection.min.js"></script>

• Add module to your app angular.module('app', ['multipleSelection'])
• Add multiple-selection-zone attribute to element where selectable items will be located

<div class="row" multiple-selection-zone>
//Add selectable items here
</div>

• Add multiple-selection-item attribute to each selectable item

<div multiple-selection-item>Item can be selected</div>

• Customize css

##How it works Each selectable item has it`s own angular scope with variables

| Name | Description | | ------------- | ------------- | | isSelectable | true if element can be selected | | isSelecting | true if element now selecting. It means it enters in selection rectangle when you dragging | | isSelected | true if element selected |

###How to customize

• Add ng-class to your item

<div multiple-selection-item ng-class="{'selecting': isSelecting ,'selected': isSelected}"></div>

• Customizing .selecting and .selected in your css

.selected {
    background-color: green !important;
}
.selecting {
    background-color: yellow !important;
}

• You can also customize your rectangle for selecting

.select-helper {
    position: absolute;
    border: 1px dashed red;
    background: red;
    opacity: 0.2;
}