Revive
Turn any clickable surface in you html into a select-like control
Revive is a transcluding directive that enables you to turn any clickable surface in you html into a select-like control with the addition of a few events. Revive is ng-model enabled directive, so it is easy to incorporate it into the application model. Other capabilities of the directive are:
- Control over the mode of operation (single or multiple selection) and in multiple selections mode you can limit the number of selections.
- Disable regions of the view by feeding a list of regions IDs to the directive. The list is instantly broadcast to all descendents - giving them the chance to disable / enable themselves.
- Reset the the directive and its transcluded directive from the model. If you need to start over, simply nudge the directive through its reset property.
Below is a simple implementation of the Revive directive. With the implementation of a few (4) events, it brings to live a collection of div elements that, orchestrated by Revive, exhibits a select-like behavior.
Selected regions:
{{mapSelections}}
Number of selections: {{maxSelections}}
Group and Sort
Group objects into categories - Sort categories and items
Group and Sort is another transcluding directive that lets you group a set of objects into categories and sub categories. You can create as many levels of categories and sub categories as you need. Your objects need not be fully categorised, i.e. you can have objects at the same level as sub categories. Categorising objects is done by a callback - so there is no holding you back on grouping your objects any way you want.
Once you are done grouping objects into categories, you can sort categories and items, so they are ready to be consumed by your representational directive. Sorting of categories and items is done by callbacks, too - so, you can easily sort categories and items in a way most suitable for your needs
The dropdown menus above, demonstrate 2-level grouping and sorting. Professional Baseball teams are categorised into confrences (leagues) and then into divisions (Sub categorised). Finally, categories and teams (in each division) are sorted in ascending alphabetic order. On the left you can also see the leagues in table view.
If this were a sporting site, a more suitable sorting of divisions would be geographically, while teams would be sorted by wins. This, too, can easily acheived by the Group and Sort.
Universal Select
Create awesome imaginative select directives
The Universal Angular Select is not a directive into itself, but a composition of the Revive and Group and Sort directives with a representional directive of your choice. The composition of the two directives provides you with a powerfull Select directive.
Below are three different Combobxes implementations, all were created using the Universal Angular Select. The two on the right are conventional comboboxes, while the one on the left is an example of non-conventional select that can be easily created by combining the Revive and Group and Sort directives into a Universal Angular Select
The Universal Angular Select is not a directive into itself, but a composition of the Revive and Group and Sort directives with a representional directive with your choice. The composition of the two directives provides you with a powerfull Select directive.
Advantages of using the Universal Angular Select
- You are no longer bound by the representational constraint of the standard Select directive.
- Your awesome imaginative select directive need only care about representation logic.
- ngModel bound - with no additional development!
- Customised grouping and sorting.
-
Enhanched selectable logic:
- Set maximal number of selctions.
- Enable / disable items.
- Reset state of Select and underline directives.