Spread.Sheets supports AngularJS.

AngularJS is a web application framework that uses JavaScript on the client side.

Use the following steps to use Spread.Sheets with AngularJS.

1. Add the Spread.Sheets AngularJS module js file, "/scripts/interop/angular.gc.spread.sheets.xxx.js".
2. Add the "gcspreadsheets" module to your application js file. For example, if your work scope is indicated by the "ng-app" attribute named "myApp", then add code like this to your app define js file:

   angular.module("myApp", ["gcspreadsheets", "module2","module3",...])

3. Add the "gc-spread-sheets" tag to your HTML page. Then add sheets and columns in the sheet. You can set attributes to spread, sheet, or column. For example:

   JavaScript	Copy Code
   <gc-spread-sheets id="ss" style="width:100%;height:500px;border:1px solid gray">     <worksheets>         <worksheet frozen-column-count="1">         </worksheet >     </worksheets> </gc-spread-sheets>

The Spread, Sheet, and Column are the basic elements with tag hierarchy. Other elements work by setting them. The main tag hierarchy is:

If the element's setting is a simple type or it can be set as a simple string, it will be set as the element's attribute. A simple type can be number, string, Boolean, enum, font, lineBorder, and so on, as shown in the following example:

If the element's setting is an object type and it cannot be set as a simple string, it will be set as a child element of the basic element. The child element may have another child element. For example:

The following topics list element directives.

• Using the Gc-spread-sheets Element
• Using the Sheet and Sheets Elements
• Using Column, Columns, and Group Elements
• Using the Style Element
• Using the Cell Elements
• Using the Validator Element       

The attribute name is case insensitive and supports using the '-' to split every word. For example, the following code result is the same:

<column dataField="country"></column>
<column datafield="country"></column>
<column DATAFIELD="country"></column>
<column data-field="country"></column>
<column Data-Field="country"></column>

The attribute value supports "{{binding}}" to bind the scope's data. For example, this is a column with the width bound to the columnWidth:

<column width={{columnWidth}} >

This is an HTML INPUT element that binds the columnWidth using ng-model.

Column Width: <input ng-model="columnWidth"  />

The column width is resized automatically when you input a number in the input element.

If you put a spread directive element or attribute to another element that does not follow the element directives, it will not take effect. You cannot reorder, insert, or remove columns defined on the html tag. Doing so might cause a binding value error.