Custom elements for GeoWiz

This is a compilation of custom UI elements for the GeoWiz platform. This repository is basically the result of my personal continuous learning about AngularJS.

All elements are prefixed with gw-.

Dependencies

• Bootstrap
• AngularJS

Contents

1. gw-select
2. gw-select-tree

---

gw-select

A fancier "select" element based on Bootstrap's Dropdown Buttons.

Usage:

• gw-selected: Object where the currently selected element will be bound to.
• gw-elements: Object array with all the elements to be shown.
• gw-label: The name of the object property with the elements label.
• gw-show="true": Always show the elements.

To add a filter to the gw-select just set the gw-filter attribute to whatever expression you wish to use as filter.

Example:

<gw-select
    gw-filter="query"
    gw-show="models.showQ"
    gw-selected="models.someElement"
    gw-elements="allElements"
    gw-label="label">
</gw-select>

gw-select-tree

Similar to gw-select but for tree-shaped data. This directive was based on angular.treeview by Ahn Jae-Ha and modified to fit the purpose of using Bootstrap's dropdown.

Usage:

In addition to gw-selected, gw-show, and gw-filter, to use this element the following attributes are needed:

• gw-tree-root: Attribute name of the tree's root element(s).
• gw-tree-id: Tree name.
• gw-node-id[="id"]: Attribute of the nodes ID.
• gw-node-label[="label"]: Attribute of the nodes label.

Example:

<gw-select-tree
    gw-height="200"
    gw-selected="models.modelName"
    gw-tree="treeObject"
    gw-tree-root="rootAttribute"
    gw-tree-id="treeId"
    gw-node-id="id"
    gw-node-label="name">
</gw-select-tree>