Version 22.2

AngularJS Support (igCombo)

Topic Overview

This topic shows how to configure igCombo with AngularJS. Each of our controls has a corresponding AngularJS directive, igCombo as well. This is an overview of the AngularJS igCombo directive.

In this topic

This topic contains the following sections:

Preview

The following is a preview of the final result.

Requirements

In order to run this sample, you need to have:

  • The required Ignite UI for jQuery JavaScript and CSS files
  • The Ignite UI AngularJS directives

Details

In the sample we have listed 20 products. Using the AngularJS ng-repeat we loop through the data source records and for each of these products we create an input and bind it to the ProductName. In this way when we edit something in the input, the change is immediately reflected in the data source. Above the product names there are two igCombo controls with similar options. They are bound to the data source with the products. Also they are bound to a value from the controller (combo.value1) which stores the selected product id. On the left side of the igCombo controls we have an input which is bound to the same value (combo.value1). We can edit the inputs holding the product names, select a value from any igCombo or edit the selected product id - the two-way binding will update the igCombo controls and the input with the corresponding values instantly.

Related Content

The following topics provide additional information related to this topic:

View on GitHub