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

b>ListBox コントロール:</p>
<wj-list-box
  selected-item="theCountry"
  items-source="countries"
  placeholder="country">
</wj-list-box>

次の例では、 ListBox コントロールを作成し、コントローラーによって公開された'countries'配列にコントロールをバインドします。 選択した値は、 selected-item 属性を使用して'theCountry'コントローラープロパティにバインドされています。

例

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

ng-model

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

wj-model-property

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

control

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

display-member-path

@ 項目の視覚表示として使用するプロパティ。

is-content-html

@ 項目の内容がプレーンテキストとHTMLのどちらであるかを示す値。

initialized

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

is-initialized

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

item-formatter

= リストに表示する値のカスタマイズに使用される関数。

items-source

= リスト項目を含む配列または ICollectionView。

max-height

@ リストの最大の高さ。

selected-index

= 現在選択されている項目のインデックス。

selected-item

= 現在選択されている項目。

selected-value

= The value of the selected-value-pathを使用して取得された selected-item の値。

selected-item

@ selected-value から selected-item を取得するために使用されるプロパティ。

got-focus

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

lost-focus

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

items-changed

& ListBox.itemsChanged イベントハンドラ。

selected-index-changed

& ListBox.selectedIndexChanged イベントハンドラ。

The wj-list-box ディレクティブには、子ディレクティブとして wijmo.angular.input.WjItemTemplate を含めることができます。