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.
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.
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:
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:
@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.@Specifies a control property that is bound to a scope using the ng-model directive.=A reference to the ListBox control created by this directive.@The property to use as the visual representation of the items.@A value indicating whether items contain plain text or HTML.&This event occurs after the binding has finished initializing the control with attribute values.=A value indicating whether the binding has finished initializing the control with attribute values.=A function used to customize the values to show in the list.=An array or ICollectionView that contains the list items.@The maximum height of the list.=The index of the currently selected item.=The item that is currently selected.=The value of the selected-item obtained using the selected-value-path.@The property used to get the selected-value from the selected-item.&The ListBox.gotFocus event handler.&The ListBox.lostFocus event handler.&The ListBox.itemsChanged event handler.&The ListBox.selectedIndexChanged event handler.The wj-list-box directive may contain wijmo.angular.input.WjItemTemplate child directive.