WjListBox Class

AngularJS directive for the ListBox control.

Use the wj-list-box directive to add ListBox controls to your AngularJS applications. Note that directive and parameter names must be formatted as lower-case with dashes instead of camel-case. For example:

b>Here is a ListBox control:</p>
<wj-list-box
  selected-item="theCountry"
  items-source="countries"
  placeholder="country">
</wj-list-box>

The example below creates a ListBox control and binds it to a 'countries' array exposed by the controller. The value selected is bound to the 'theCountry' controller property using the selected-item attribute.

Example

The wj-list-box directive supports the following attributes:

ng-model: @ Binds the control's selectedValue 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 ListBox control created by this directive.
display-member-path: @ The property to use as the visual representation of the items.
is-content-html: @ A value indicating whether items contain plain text or HTML.
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.
item-formatter: = A function used to customize the values to show in the list.
items-source: = An array or ICollectionView that contains the list items.
max-height: @ The maximum height of the list.
selected-index: = The index of the currently selected item.
selected-item: = The item that is currently selected.
selected-value: = The value of the selected-item obtained using the selected-value-path.
selected-value-path: @ The property used to get the selected-value from the selected-item.
got-focus: & The ListBox.gotFocus event handler.
lost-focus: & The ListBox.lostFocus event handler.
items-changed: & The ListBox.itemsChanged event handler.
selected-index-changed: & The ListBox.selectedIndexChanged event handler.

The wj-list-box directive may contain wijmo.angular.input.WjItemTemplate child directive.

Heirarchy

WjDirective
- WjListBox