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.
This module includes the following directives:
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-item
elements, each with a 'header' attribute and its own content.<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>
wij-accordion
elements.header
<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>
minLength
source
{ value, label }
objects).sourceFn
value
<wij-autocomplete value="trip.from" min-length="2" source-fn="taSource"> </wij-autocomplete>
actual
good
max
poor
satisfactory
target
<wij-bullet actual="{{ap.vol2011/1000000}}" poor="5" satisfactory="15" good="18" target="20" max="50" ></wij-bullet>
<wij-bullet-legend class="text-info text-right" style="float:right"></wij-bullet-legend>
data
height
interval
legend
max
min
titleX
titleY
type
width
<wij-chart class="span10" height="600" type="{{chartType}}" data="{{getChartData()}}" min="0" title-x="Airport" title-y="Pax (millions)" > </wij-chart>
checked
click
<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>
source
{ value, label }
objects).value
<wij-combobox value="trip.from" source="{{getComboItems()}}" > </wij-combobox>
fill
gauge
max
min
showLimits
stroke
targetFill
targetValue
value
width
<wij-gauge value="{{product.sales.qThis}}" max="{{product.sales.max}}" fill="red" gauge="#e0e0e0" target-value="{{product.levels.target}}" target-fill="green" > </wij-gauge>
allowWrapping
data
frozenColumns
<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>
aggregate
binding
format
group
groupHeader
header
width
<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>
dropDown
format
maxDate
minDate
value
<wij-inputdate value="trip.returnDate" minDate="{{trip.departDate}}"> </wij-inputdate>
decimalPlaces
groupSeparators
increment
max
min
spinner
value
<wij-inputnumber value="trip.adults" max="5" > </wij-inputnumber>
count
plural
singular
zero
<wij-pluralize count="trip.adults" singular="adult" zero="nobody"></wij-pluralize>
indeterminate
value
<wij-progressbar indeterminate="true" ng-show="isLoading"></wij-progressbar>
checked
click
name
<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>
max
min
value
<wij-slider value="trip.adults" min="0" max="5" > </wij-slider>
collapsingPanel
orientation
splitterDistance
<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>
wij-tab-item
elements, each with a 'header' attribute and its own content.alignment
collapsible
scrollable
<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>
wij-tab
elements.header
<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>
This paragraph contains a <i wij-tooltip="Tooltip content (<b>HTML</b> is allowed here)."> rich tooltip </i>.