Module 'wij'

AngularJS directives for Wijmo components (in addition to the ones provided in angular.wijmo.js and defined in the 'wijmo' module).

This module is defined in file wijDctv.js.

Directives

This module includes the following directives:

accordion accordion-item autocomplete bullet bullet-legend chart checkbox combobox gauge grid grid-column inputdate inputnumber menu menu-item menu-separator pluralize progressbar radio slider splitter tab tab-item tooltip

Requires Wijmo

To use any of the directives in this module, include the following code in your main html page:

<link href="http://cdn.wijmo.com/themes/aristo/jquery-wijmo.css"
type="text/css" rel="stylesheet" />
<link href="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20131.2.min.css"
type="text/css" rel="stylesheet" />
<script src="http://cdn.wijmo.com/jquery.wijmo-open.all.3.20131.2.min.js"
type="text/javascript"></script>
<script src="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20131.2.js"
type="text/javascript"></script>

wij-accordion

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

wij-accordion-item

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

wij-autocomplete

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

wij-bullet

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

wij-bullet-legend

Example

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

wij-chart

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

wij-checkbox

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

wij-combobox

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

wij-gauge

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

wij-grid

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

wij-grid-column

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

wij-inputdate

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

wij-inputnumber

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

wij-menu

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

wij-menu-item

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

wij-menu-separator

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

wij-pluralize

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

wij-progressbar

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

wij-radio

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

wij-slider

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

wij-splitter

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

wij-tab

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

wij-tab-item

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

wij-tooltip

Example

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

See Also