Skip to content

adeopura4/angular-multiple-selection

 
 

Repository files navigation

Angular Multiple Selection Module

Simplest way to make your angular items selectable

Demo Page

See also angular-multiple-drag

##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;
}

About

Simplest way to make your angular items selectable

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 80.5%
  • HTML 19.5%