File tree Expand file tree Collapse file tree 1 file changed +36
-1
lines changed Expand file tree Collapse file tree 1 file changed +36
-1
lines changed Original file line number Diff line number Diff line change @@ -23,10 +23,45 @@ Download [source](https://github.com/maxazan/angular-multiple-selection/archive/
2323
2424##Using
2525* Add ` multiple-selection.min.js ` file to your application
26- ```
26+ ``` html
2727<script type =" text/javascript" src =" multiple-selection.min.js" ></script >
2828```
2929* Add module to your app ` angular.module('app', ['multipleSelection']) `
3030* Add ` multiple-selection-zone ` attribute to element where selectable items will be located
3131* Add ` multiple-selection-item ` attribute to each selectable item
3232* Customize css
33+
34+
35+ ##How it works
36+ Each selectable item has it`s own angular scope with variables
37+
38+ | Name | Description |
39+ | ------------- | ------------- |
40+ | isSelectable | ` true ` if element can be selected |
41+ | isSelecting | ` true ` if element now selecting. It means it enters in selection rectangle when you dragging |
42+ | isSelected | ` true ` if element selected |
43+
44+ ###How to customize
45+
46+ * Add ` ng-class ` to your item
47+ ``` html
48+ <div multiple-selection-item ng-class =" {'selecting': isSelecting ,'selected': isSelected}" ></div >
49+ ```
50+ * Customizing ` .selecting ` and ` .selected ` in your css
51+ ``` css
52+ .selected {
53+ background-color : green !important ;
54+ }
55+ .selecting {
56+ background-color : yellow !important ;
57+ }
58+ ```
59+ * You can also customize your rectangle for selecting
60+ ``` css
61+ .select-helper {
62+ position : absolute ;
63+ border : 1px dashed red ;
64+ background : red ;
65+ opacity : 0.2 ;
66+ }
67+ ```
You can’t perform that action at this time.
0 commit comments