建立一個簡單的網格
第 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。