v5.20192.624
|

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.

Hierarchy

  • WjDirective
    • WjListBox