WjComboBox Class

AngularJS directive for the ComboBox control.

Use the wj-combo-box directive to add ComboBox 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:

<p>Here is a ComboBox control:</p>
<wj-combo-box
  text="theCountry"
  items-source="countries"
  is-editable="false"
  placeholder="country">
</wj-combo-box>

The example below creates a ComboBox control and binds it to a 'countries' array exposed by the controller. The ComboBox searches for the country as the user types. The isEditable property is set to false, so the user is forced to select one of the items in the list.

Example

The wj-combo-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 ComboBox control created by this directive.
display-member-path: @ The name of the property to use as the visual representation of the items.
is-content-html: @ A value indicating whether the drop-down list displays the items as plain text or as HTML.
is-dropped-down: @ A value indicating whether the drop down list is currently visible.
is-editable: @ A value indicating whether the user can enter values not present on the list.
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 shown in the drop-down list.
items-source: = An array or ICollectionView that contains items to show in the list.
max-drop-down-height: @ The maximum height of the drop-down list.
max-drop-down-width: @ The maximum width of the drop-down list.
placeholder: @ A string shown as a hint when the control is empty.
is-required: @ A value indicating whether to prevent null values.
show-drop-down-button: @ A value indicating whether the control displays a drop-down button.
selected-index: = The index of the currently selected item in the drop-down list.
selected-item: = The currently selected item in the drop-down list.
selected-value: = The value of the selected item, obtained using the selected-value-path.
selected-value-path: @ The name of the property used to get the selected-value from the selected-item.
text: = The text to show in the control.
is-dropped-down-changing: & The ComboBox.isDroppedDownChanging event handler.
is-dropped-down-changed: & The ComboBox.isDroppedDownChanged event handler.
selected-index-changed: & The ComboBox.selectedIndexChanged event handler.
got-focus: & The ComboBox.gotFocus event handler.
lost-focus: & The ComboBox.lostFocus event handler.
text-changed: & The ComboBox.textChanged event handler.

Heirarchy

WjDropDown
- WjComboBox