• Creates an interface with collapsible items where one item is expanded at any time.
• Contains wij-accordion-item elements, each with a 'header' attribute and its own content.

Example

 <wij-accordion>
   <wij-accordion-item header="<b>ATL</b> Atlanta, GA">
     <div>accordion item content...</div>
   </wij-accordion-item>
   <wij-accordion-item header="<b>ORD</b> Chicago, IL">
     <div>accordion item content...</div>
   </wij-accordion-item>
 </wij-accordion>

See Also

• Wijmo accordion: http://wijmo.com/wiki/index.php/Accordion#API

• Provides content for wij-accordion elements.

Attributes

header

Html content that appears in the header.

Example

 <wij-accordion>
   <wij-accordion-item header="<b>ATL</b> Atlanta, GA">
     <div>accordion item content...</div>
   </wij-accordion-item>
   <wij-accordion-item header="<b>ORD</b> Chicago, IL">
     <div>accordion item content...</div>
   </wij-accordion-item>
 </wij-accordion>

See Also

• Wijmo accordion: http://wijmo.com/wiki/index.php/Accordion#API

• Input element with auto-complete (shows list as the user types).
• Implemented using the jQuery autocomplete widget.

Attributes

minLength

Minimum length of input to start looking for matches.

source

List of valid choices (array of { value, label } objects).

sourceFn

Source function (takes two arguments, 'request' and 'response'). This is a function binding attribute.

value

Current value. This is a two-way binding attribute.

Example

 <wij-autocomplete
   value="trip.from"
   min-length="2"
   source-fn="taSource">
 </wij-autocomplete>

See Also

• jQuery autocomplete: http://api.jqueryui.com/autocomplete

• Implements a bullet graph as described in Stephen Few's "Information Dashboard Design" book.
• The chart consists of bars that show different performance levels as well as target and actual values.
• Implemented using the wijlineargauge widget.

Attributes

actual

Actual level.

good

Level considered good.

max

Maximum value to use for scaling the bullet graph.

poor

Level considered poor (less than satisfgatory).

satisfactory

Level considered satisfactory (less than good).

target

Target level.

Example

 <wij-bullet
   actual="{{ap.vol2011/1000000}}"
   poor="5" satisfactory="15" good="18" target="20" max="50" ></wij-bullet>

See Also

• Bullet graph design spec: http://www.perceptualedge.com/articles/misc/Bullet_Graph_Design_Spec.pdf
• Stephen Few's book: http://www.amazon.com/Information-Dashboard-Design-Effective-Communication/dp/0596100167
• Wijmo: http://wijmo.com
• Wijmo linear gauge: http://wijmo.com/wiki/index.php/Lineargauge#API

• Shows a static legend describing the meaning of the bullet graph ranges.

Example

 <wij-bullet-legend class="text-info text-right" style="float:right"></wij-bullet-legend>

• Shows charts of different types.
• Implemented using the wijmo chart widgets.
• Uses a simple data format common to all chart types.

Attributes

data

Chart data: an array of arrays; the first column contains the x values and the remaining columns contain one series each (for most chart types).

height

Height of the chart in pixels.

interval

Interval between grid lines.

legend

Whether to show a legend (by default, a legend is shown if there are more than one series).

max

Maximum value to show on the Y axis.

min

Minimum value to show on the Y axis.

titleX

Title for the X (category) axis.

titleY

Title for the Y (value) axis.

type

Chart type: area, bar, bubble, column, line, pie, or scatter.

width

Width of the chart in pixels.

Example

 <wij-chart
   class="span10" height="600"
   type="{{chartType}}"
   data="{{getChartData()}}"
   min="0"
   title-x="Airport"
   title-y="Pax (millions)" >
 </wij-chart>

See Also

• Wijmo: http://wijmo.com
• Wijmo line chart: http://wijmo.com/wiki/index.php/Linechart#API
• Wijmo bar chart: http://wijmo.com/wiki/index.php/Barchart#API
• Wijmo pie chart: http://wijmo.com/wiki/index.php/Piechart#API

• Check-box widget.
• Implemented using the Wijmo wijcheckbox widget.

Attributes

checked

Gets a value that determines whether the checkbox is currently checked.

click

Function called when the user changes the value of the checkbox. This is a function binding attribute.

Example

 <label><wij-checkbox click="toggleTripExtra(1)" checked="{{getTripExtra(1)}}"></wij-checkbox> Hotel</label>
 <label><wij-checkbox click="toggleTripExtra(2)" checked="{{getTripExtra(2)}}"></wij-checkbox> Car</label>
 <label><wij-checkbox click="toggleTripExtra(4)" checked="{{getTripExtra(4)}}"></wij-checkbox> Insurance</label>

See Also

• Wijmo wijcheckbox: http://wijmo.com/wiki/index.php/CheckBox#API

• Input element with auto-complete (shows list as the user types).
• Implemented using the Wijmo wijcombobox widget.

Attributes

source

List of valid choices (array of { value, label } objects).

value

Current value. This is a two-way binding attribute.

Example

 <wij-combobox
   value="trip.from"
   source="{{getComboItems()}}" >
 </wij-combobox>

See Also

• Wijmo wijcombobox: http://wijmo.com/wiki/index.php/Combobox#API

• Shows a streamlined radial gauge with min, max, and actual value.
• Implemented using the wijradialgauge widget.

Attributes

fill

Color of the filled area (from 'start' to 'value').

gauge

Color of the gauge display.

max

Gauge maximum (end) value.

min

Gauge minimum (start) value.

showLimits

Whether to show the minimum and maximum values below the gauge.

stroke

Color of the gauge outline.

targetFill

Color of the filled area if 'value' is equal to or greater than 'targetValue'.

targetValue

Target value for the gauge.

value

Value indicated by the gauge pointer.

width

Gauge width in pixels.

Example

 <wij-gauge
     value="{{product.sales.qThis}}"
     max="{{product.sales.max}}"
     fill="red" gauge="#e0e0e0"
     target-value="{{product.levels.target}}" target-fill="green" >
     </wij-gauge>

See Also

• Wijmo: http://wijmo.com
• Wijmo radial gauge chart: http://wijmo.com/wiki/index.php/Radialgauge#API

• Simple data grid with sorting and grouping.
• Implemented using the Wijmo wijgrid widget.

Attributes

allowWrapping

Whether text in grid cells should be allowed to wrap within cells.

data

List of items to bind to. This is a two-way binding attribute.

frozenColumns

Number of non-scrollable columns.

Example

 <wij-grid
   style="height:400px;overflow:scroll;"
   data="airports"
   frozen-columns="1">
   <wij-grid-column binding="city"></wij-grid-column>
   <wij-grid-column binding="state" width="80" aggregate="count"
     group="true" group-header="{0}: {2} airport(s)"></wij-grid-column>
   <wij-grid-column binding="vol2011" header="Traffic"
     format="n0" width="100" aggregate="sum"></wij-grid-column>
 </wij-grid>

See Also

• Wijmo wijgrid: http://wijmo.com/wiki/index.php/Grid#API

• Represents a column in a wij-grid directive.

Attributes

aggregate

Aggregate to display in group header rows for this column ("none", "count", "sum", "average", "min", "max", "std", "stdPop", "var", "varPop", or "custom").

binding

Property shown in this column.

format

Format used to display numeric values in this column.

group

Whether items should be grouped by the values in this column.

groupHeader

Text to display in the group header rows ("{0}", "{1}", and "{2}" are replaced with the value being grouped on, the column header, and the aggregate value).

header

Column header content.

width

Column width in pixels.

Example

 <wij-grid
   style="height:400px;overflow:scroll;"
   data="airports"
   frozen-columns="1">
   <wij-grid-column binding="city"></wij-grid-column>
   <wij-grid-column binding="state" width="80" aggregate="count"
     group="true" group-header="{0}: {2} airport(s)"></wij-grid-column>
   <wij-grid-column binding="vol2011" header="Traffic"
     format="n0" width="100" aggregate="sum"></wij-grid-column>
 </wij-grid>

See Also

• Wijmo wijgrid: http://wijmo.com/wiki/index.php/Grid#API

• Date input with a month calendar drop-down.
• Implemented using the Wijmo wijinputdate widget.

Attributes

dropDown

Whether to show a drop-down calendar (true by default).

format

Format used to display the date ("d" by default, short date). See the wijinputdate documentation for more options.).

maxDate

Maximum date that can be selected.

minDate

Minimum date that can be selected.

value

Current value (selected date). This is a two-way binding attribute.

Example

 <wij-inputdate value="trip.returnDate" minDate="{{trip.departDate}}">
 </wij-inputdate>

See Also

• Wijmo wijinputdate: http://wijmo.com/wiki/index.php/InputDate#API

• Numeric input with range-checking and spinners.
• Implemented using the Wijmo wijinputnumber widget.

Attributes

decimalPlaces

Number of decimal places to show (defaults to zero).

groupSeparators

Whether to show thousand separators (defaults to true).

increment

Increment applied by the spinner buttons (defaults to one).

max

Maximum acceptable value (defaults to 1000000000).

min

Minimum acceptable value (defaults to zero).

spinner

Whether to show spinner buttons (defaults to true).

value

Numeric value editable by the user. This is a two-way binding attribute.

Example

  <wij-inputnumber value="trip.adults" max="5" >
 </wij-inputnumber>

See Also

• Wijmo wijinputnumber: http://wijmo.com/wiki/index.php/Inputnumber#API

• Creates a menu composed of a hierarchical list of wij-menu-item elements.

Attributes

animation

Animation to use when showing menu items. Valid options are: null (the default), 'slide', 'puff', 'fold', 'fade', etc.

trigger

When to open the menus. Valid options are: 'mouseenter' (the default), 'click', 'dbclick', or 'rtclick'.

Example

 <wij-menu>
   <wij-menu-item header="Navigate" >
     <wij-menu-item header="Home"        href="#/home"></wij-menu-item>
     <wij-menu-item header="Input"       href="#/wijmo/input"></wij-menu-item>
     <wij-menu-separator></wij-menu-separator>
     <wij-menu-item header="Commands">
       <wij-menu-item header="Home"    click="say('home: ' + {{14*14}})"></wij-menu-item>
       <wij-menu-item header="Input"   click="say('input: ' + {{15*15}})"></wij-menu-item>
       <wij-menu-item header="Layout"  click="say('layout: ' + {{16*16}})"></wij-menu-item>
     </wij-menu-item>
   </wij-menu-item>
 </wij-menu>

See Also

• Wijmo wijmenu: http://wijmo.com/wiki/index.php/Menu

• Represents an item in a wij-menu directive.

Example

 <wij-menu>
   <wij-menu-item header="Navigate" >
     <wij-menu-item header="Home"        href="#/home"></wij-menu-item>
     <wij-menu-item header="Input"       href="#/wijmo/input"></wij-menu-item>
     <wij-menu-separator></wij-menu-separator>
     <wij-menu-item header="Commands">
       <wij-menu-item header="Home"    click="say('home: ' + {{14*14}})"></wij-menu-item>
       <wij-menu-item header="Input"   click="say('input: ' + {{15*15}})"></wij-menu-item>
       <wij-menu-item header="Layout"  click="say('layout: ' + {{16*16}})"></wij-menu-item>
     </wij-menu-item>
   </wij-menu-item>
 </wij-menu>

See Also

• Wijmo wijmenu: http://wijmo.com/wiki/index.php/Menu

• Represents a separator between groups of items a wij-menu directive.

Example

 <wij-menu>
   <wij-menu-item header="Navigate" >
     <wij-menu-item header="Home"        href="#/home"></wij-menu-item>
     <wij-menu-item header="Input"       href="#/wijmo/input"></wij-menu-item>
     <wij-menu-separator></wij-menu-separator>
     <wij-menu-item header="Commands">
       <wij-menu-item header="Home"    click="say('home: ' + {{14*14}})"></wij-menu-item>
       <wij-menu-item header="Input"   click="say('input: ' + {{15*15}})"></wij-menu-item>
       <wij-menu-item header="Layout"  click="say('layout: ' + {{16*16}})"></wij-menu-item>
     </wij-menu-item>
   </wij-menu-item>
 </wij-menu>

See Also

• Wijmo wijmenu: http://wijmo.com/wiki/index.php/Menu

• Pluralize directive similar to ng-pluralize, but with simpler markup.
• Spells out numbers less than or equal to 10 (one, two, three, ..., 11, 12, 13, ...).

Attributes

count

Quantity to pluralize. This is a two-way binding attribute.

plural

String to use when the count is greater than one (e.g. 42 'leaves').

singular

String to use when the count is one (e.g. one 'leaf').

zero

String to use when the count is zero (e.g. 'empty').

Example

 <wij-pluralize count="trip.adults" singular="adult" zero="nobody"></wij-pluralize>

See Also

• ng-pluralize: http://docs.angularjs.org/api/ng.directive:ngPluralize

• Provides visual feedback to indicate a process is active.

Attributes

indeterminate

Whether the progress bar is indeterminate (should show animation but no percentages).

value

Percentage complete (between zero and 100).

Example

 <wij-progressbar indeterminate="true" ng-show="isLoading"></wij-progressbar>

See Also

• Wijmo progress bar: http://wijmo.com/wiki/index.php/Progressbar#API

• Radio button widget.
• Implemented using the Wijmo wijradio widget.

Attributes

checked

Gets a value that determines whether the radio button is currently checked.

click

Function called when the user changes the value of the radio button. This is a function binding attribute.

name

Name of the group that this radio button belongs to.

Example

 <label><wij-radio name="tc" click="setTripClass('economy')" checked="{{trip.class=='economy'}}"></wij-radio> Economy</label>
 <label><wij-radio name="tc" click="setTripClass('business')" checked="{{trip.class=='business'}}"></wij-radio> Business</label>
 <label><wij-radio name="tc" click="setTripClass('first')" checked="{{trip.class=='first'}}"></wij-radio> First</label>

See Also

• Wijmo wijradio: http://wijmo.com/wiki/index.php/Radio#API

• Slider widget used to visually edit numeric values.
• Implemented using the Wijmo wijslider widget.

Attributes

max

Maximum value on the slider.

min

Minimum value on the slider.

value

Current value displayed on the slider. This is a two-way binding attribute.

Example

 <wij-slider
   value="trip.adults"
   min="0" max="5" >
 </wij-slider>

See Also

• Wijmo wijradio: http://wijmo.com/wiki/index.php/Slider

• Divides an element into two panels separated by a movable bar.
• Supports horizontal and vertical orientations.
• One of the elements can optionally be collapsed.

Attributes

collapsingPanel

Which panel should collapse when the user clicks the expander element. Possible values are 'panel1' (the default), 'panel2', or null.

orientation

Orientation of the splitter bar. Possible values are 'vertical' (the default) or 'horizontal'.

splitterDistance

Distance in pixels between the edge of the widget and the splitter bar (default is 100).

Example

 <wij-splitter splitter-distance="250" style="height:300px;border:2px solid grey" >
   <div>Panel on the left.</div>
   <div>Panel on the right.</div>
 </wij-splitter>

See Also

• Wijmo splitter: http://wijmo.com/wiki/index.php/Splitter#API

• Creates a tabbed interface.
• Contains wij-tab-item elements, each with a 'header' attribute and its own content.

Attributes

alignment

Determines the position of the tabs (top, bottom, left, or right of the content).

collapsible

Determines whether users can collapse tabs by clicking them when they are selected.

scrollable

Determines whether tabs should wrap or scroll when they exceed the available width.

Example

 <wij-tab>
   <wij-tab-item header="First Tab">
     <div>This is the content of the first tab.</div>
   </wij-tab-item>
   <wij-tab-item header="Second Tab">
     <div>This is the content of the second tab.</div>
   </wij-tab-item>
 </wij-tab>

See Also

• Wijmo tabs: http://wijmo.com/wiki/index.php/Tabs#API

• Provides content for wij-tab elements.
• Adapted from http://angularjs.org/#components-js.

Attributes

header

Html content that appears in the tab.

Example

 <wij-tab>
   <wij-tab-item header="First Tab">
     <div>This is the content of the first tab.</div>
   </wij-tab-item>
   <wij-tab-item header="Second Tab">
     <div>This is the content of the second tab.</div>
   </wij-tab-item>
 </wij-tab>

See Also

• Wijmo tabs: http://wijmo.com/wiki/index.php/Tabs#API

• Provides balloon tooltips with HTML content.

Example

 This paragraph contains a
 <i wij-tooltip="Tooltip content (<b>HTML</b> is allowed here).">
  rich tooltip
 </i>.

See Also

• Wijmo tooltip: http://wijmo.com/wiki/index.php/Tooltip#API