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

<p>InputNumber コントロール:</p>
<wj-input-number
  value="theNumber"
  min="0"
  max="10"
  format="n0"
  placeholder="number between zero and ten">
</wj-input-number>

次の例では、InputNumber コントロールを作成し、異なる書式、範囲、ステップ値を使用した場合の効果を示します。

デモ

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

ng-model

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

wj-model-property

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

control

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

format

@数値の表示に使用される書式(Globalize を参照）。

input-type

@ コントロールによってホストされているHTML入力要素の"type"属性。

initialized

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

is-initialized

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

max

@有効な最大の数値。

min

@有効な最小の数値。

place-holder

@ コントロールが空のときにヒントとして表示する文字列。

is-required

@null値が禁止されるかどうかを示す値。

show-spinner

@値をstep 単位ずつ増減するスピナーボタンを表示するかどうかを示す値。

step

@ユーザーがスピナーボタンをクリックしたときに値を増減する量。

text

=コントロールに表示するテキスト。

value

=編集する数値。

got-focus

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

lost-focus

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

text-changed

&InputNumber.textChanged イベントハンドラ。

value-changed

&InputNumber.valueChanged イベントハンドラ。