wj-linear-gauge ディレクティブは、AngularJSアプリケーションに線形ゲージを追加する場合に使用します。 ディレクティブ名とパラメーター名の書式は、キャメルケースではなくダッシュで結んだ小文字にする必要があります 次に例を示します。

<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>

wj-linear-gauge ディレクティブは以下の属性をサポートしています。

ng-model

@ Angularのng-modelディレクティブを使用してコントロールの value プロパティをバインドします。 ng-modelディレクティブを使用してプロパティをバインドすると、 データ検証やコントロールの状態のフォームインスタンスへの公開など、ng-modelの持つ利点を活用できます。 ng-modelディレクティブによってバインドされるコントロールのプロパティを再定義するには、 wj-model-property属性を使用します。

wj-model-property

@ ng-model ディレクティブを使用してスコープにバインドされるコントロールプロパティを指定します。

control

= このディレクティブによって作成された LinearGauge コントロールへの参照。

direction

@ ゲージの値が増加する方向を示す GaugeDirection 値。

format

@ ゲージ値をテキストとして表示するために使用される書式文字列。

has-shadow

@ ゲージに影効果を付けるかどうかを示す値。

initialized

& このイベントは、バインディングによるコントロールの初期化が完了した後に発生します。

is-initialized

= バインディングによるコントロールの初期化が完了したかどうかを示す値。

is-animated

@ ゲージの値の変化をアニメーション表示するかどうかを示す値。

is-read-only

@ ユーザーが値を編集できないようにするかどうかを示す値。

min

@ ゲージに表示できる最小値。

max

@ ゲージに表示できる最大値。

show-text

@ どの値をゲージにテキストとして表示するかを示す ShowText 値。

step

@ ユーザーが方向キーを押したときにvalueプロパティを増減する量。

thickness

@ ゲージの太さ（0～1のスケール）。

value

= ゲージに表示される値。

got-focus

& LinearGauge.gotFocus イベントハンドラ。

lost-focus

& LinearGauge.lostFocus イベントハンドラ。

wj-linear-gauge ディレクティブには1つ以上の wijmo.angular.gauge.WjRange ディレクティブを含めることができます。

Example