Use the wj-linear-gauge directive to add linear gauges to your AngularJS applications. Note that directive and parameter names must be formatted in lower-case with dashes instead of camel-case. For example:

<wj-linear-gauge
  value="ctx.gauge.value"
  show-text="Value"
  is-read-only="false">
  <wj-range
    wj-property="pointer"
    thickness="0.2">
    <wj-range
      min="0"
      max="33"
      color="green">
    </wj-range>
    <wj-range
      min="33"
      max="66"
      color="yellow">
    </wj-range>
    <wj-range
      min="66"
      max="100"
      color="red">
    </wj-range>
  </wj-range>
</wj-linear-gauge>

The wj-linear-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 LinearGauge control created by this directive.

direction

@ The GaugeDirection value in which the gauge fills as the value grows.

format

@ The format string used for displaying the 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

@ The 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.

thickness

@ The thickness of the gauge, on a scale of zero to one.

value

= The value displayed on the gauge.

got-focus

& The LinearGauge.gotFocus event handler.

lost-focus

& The LinearGauge.lostFocus event handler.

The wj-linear-gauge directive may contain one or more wijmo.angular.gauge.WjRange directives.

Example