ngHandsontable -AngularJS可提琴的指令
启用在AngularJs中创建数据网格应用程序。
演示
请参阅http://handsontable.gi**t*hub.io/nghandsontable的演示。
用法
包括库文件：
< link rel =" stylesheet " media =" screen " href =" bower_components/handsontable/dist/handsontable.full.css " >
< script src =" bower_components/angular/angular.js " > script >
< script src =" bower_components/handsontable/dist/handsontable.full.js " > script >
< script src =" dist/ ngHandsontable .js " > script >包括您的应用程序的组件：
angular . module ( 'my-app' , [ ' ngHandsontable ' ] ) ;模板：
< hot-table settings =" {colHeaders: colHeaders, contextMenu: ['row_above', 'row_below', 'remove_row'], afterChange: afterChange} "
row-headers =" false "
min-spare-rows =" minSpareRows "
datarows =" db.items "
height =" 300 "
width =" 700 " >
< hot-column data =" id " title =" 'ID' " > hot-column >
< hot-column data =" name.first " title =" 'First Name' " type =" grayedOut " read-only > hot-column >
< hot-column data =" name.last " title =" 'Last Name' " type =" grayedOut " read-only > hot-column >
< hot-column data =" address " title =" 'Address' " width =" 150 " > hot-column >
< hot-column data =" product.description " title =" 'Favorite food' " type =" 'autocomplete' " >
< hot-autocomplete datarows =" description in product.options " > hot-autocomplete >
hot-column >
< hot-column data =" price " title =" 'Price' " type =" 'numeric' " width =" 80 " format =" '$ 0,0.00' " > hot-column >
< hot-column data =" isActive " title =" 'Is active' " type =" 'checkbox' " width =" 65 " checked-template =" 'Yes' " unchecked-template =" 'No' " > hot-column >
hot-table >控制器：
$scope . db . items = [
{
"id" : 1 ,
"name" : {
"first" : "John" ,
"last" : "Schmidt"
} ,
"address" : "45024 France" ,
"price" : 760.41 ,
"isActive" : "Yes" ,
"product" : {
"description" : "Fried Potatoes" ,
"options" : [
{
"description" : "Fried Potatoes" ,
"image" : "//a248.e.akamai.net/assets.github.com/images/icons/emoji/fries.png"
} ,
{
"description" : "Fried Onions" ,
"image" : "//a248.e.akamai.net/assets.github.com/images/icons/emoji/fries.png"
}
]
}
} ,
//more items go here
] ; 指令和属性规范
创建表的主要指令是
这里列出的所有可提琴选项都应得到支持。骆驼模式下的选项应传递给连字符模式的指令eq autoWrapCol: true >
建议将所有设置放在一个大对象（ settings="ctrl.settings" ）中。与任何其他属性不同，设置属性却没有观察到，因此使用此属性有助于实现更高的性能。
执照
麻省理工学院许可证（有关全文请参阅许可证文件）
下载源码
通过命令行克隆项目:
git clone https://github.com/handsontable/ngHandsontable.git