Ignite UI directives for AngularJS

Code

<ig-grid id="employees-grid"
     data-source="employees"
     primary-key="employeeID"
     auto-generate-columns="false">
    <columns>
        <column key="employeeID" header-text="ID" width="65px" data-type="number"></column>
        <column key="lastName" header-text="Last Name"  width="250px"  data-type="string"></column>
        <column key="firstName" header-text="First Name"  width="200px" data-type="string"></column>
        <column key="title" header-text="Title" data-type="string"></column>
    </columns>
</ig-grid>

Ignite UI controls are instantiated using AngularJS directives. This example uses markup, but you have the ability to use controller options as well.

The Ignite UI AngularJS directives offer full two-way databinding into the controls.

This text box is bound to the value of the last name column of the first record in the grid. Edit the name in the box to see how the changes are immediately reflected in the grid. This is but a taste as to what's possible with the AngularJS directives. For full-fledged samples take a look at the basic, controller options and master/detail samples.

Ignite UI

AngularJS Directives

Try it out...

Code

Samples