创建一个简单的网格
第 1 步 - 在项目中包含 uiGrid
<link rel="styleSheet" href="release/ui-grid.min.css"/>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>
<script src="/release/ui-grid.min.js"></script>
第 2 步 - 添加 uiGrid 模块作为你的应用程序的依赖项
var app = angular.module("myApp", ["ui-grid"]);
第 3 步 - 网格数据
$scope.myData = [
{
"firstName": "John",
"lastName": "Doe"
},
{
"firstName": "Jane",
"lastName": "Doe"
}
];
第 4 步 - 网格的 HTML 标记
使用 ui-grid 指令并传入 myData 的 scope 属性。
<div ng-controller="mainCtrl">
<div id="grid1" ui-grid="{ data: myData }"></div>
</div>
这应该呈现一个包含两列的网格 - 名字和姓氏。
它将第一项数据数组的键作为列名称，并将 camelCase 样式键转换为正确的单词：firstName 到 First Name。