Use the wj-radial-gauge directive to add radial gauges to your AngularJS applications.
Note that directive and parameter names must be formatted as lower-case with dashes
instead of camel-case. For example:
Here is a <b>RadialGauge</b> control:</p>
<wj-radial-gauge
style="height:300px"
value="count"
min="0" max="10"
is-read-only="false">
</wj-radial-gauge>
The wj-radial-gauge directive supports the following attributes:
ng-model
@ Binds the control's value property using the ng-model Angular
directive. Binding the property using the ng-model directive provides standard benefits
like validation, adding the control's state to the form instance, and so on. To redefine
properties on a control that is bound by the ng-model directive, use the wj-model-property
attribute.
wj-model-property
@ Specifies a control property that is bound to a scope using the
ng-model directive.
control
= A reference to the RadialGauge
control created by this directive.
auto-scale
@ A value indicating whether the gauge
scales the display to fill the host element.
format
@ The format string used for displaying
gauge values as text.
has-shadow
@ A value indicating whether the gauge
displays a shadow effect.
initialized
& This event occurs after the binding has finished
initializing the control with attribute values.
is-initialized
= A value indicating whether the binding has finished
initializing the control with attribute values.
is-animated
@ A value indicating whether the gauge
animates value changes.
is-read-only
@ A value indicating whether users are
prevented from editing the value.
min
@ The minimum value that the gauge
can display.
max
@ The maximum value that the gauge
can display.
show-text
@ A ShowText value indicating
which values display as text within the gauge.
step
@ The amount to add or subtract to the
value property when the user presses the arrow keys.
start-angle
@ The starting angle for the gauge, in
degreees, measured clockwise from the 9 o'clock position.
sweep-angle
@ The sweeping angle for the gauge in degrees
(may be positive or negative).
thickness
@ The thickness of the gauge, on a scale
of zero to one.
AngularJS directive for the RadialGauge control.
Use the wj-radial-gauge directive to add radial gauges to your AngularJS applications. Note that directive and parameter names must be formatted as lower-case with dashes instead of camel-case. For example:
The wj-radial-gauge directive supports the following attributes:
@
Binds the control's value property using the ng-model Angular directive. Binding the property using the ng-model directive provides standard benefits like validation, adding the control's state to the form instance, and so on. To redefine properties on a control that is bound by the ng-model directive, use the wj-model-property attribute.@
Specifies a control property that is bound to a scope using the ng-model directive.=
A reference to the RadialGauge control created by this directive.@
A value indicating whether the gauge scales the display to fill the host element.@
The format string used for displaying gauge values as text.@
A value indicating whether the gauge displays a shadow effect.&
This event occurs after the binding has finished initializing the control with attribute values.=
A value indicating whether the binding has finished initializing the control with attribute values.@
A value indicating whether the gauge animates value changes.@
A value indicating whether users are prevented from editing the value.@
The minimum value that the gauge can display.@
The maximum value that the gauge can display.@
A ShowText value indicating which values display as text within the gauge.@
The amount to add or subtract to the value property when the user presses the arrow keys.@
The starting angle for the gauge, in degreees, measured clockwise from the 9 o'clock position.@
The sweeping angle for the gauge in degrees (may be positive or negative).@
The thickness of the gauge, on a scale of zero to one.=
The value displayed on the gauge.&
The RadialGauge.gotFocus event handler.&
The RadialGauge.lostFocus event handler.The wj-radial-gauge directive may contain one or more wijmo.angular.gauge.WjRange directives.
Example