本文转自：
Getting Started
Steps for getting started (example on right):
-
- Add references to and .
- Add references to 's javascript and css files.
- Where you declare your app module, add ngGrid:
angular.module('myApp',['ngGrid']);If you use , it is in your app.js file. - In your html file within the controller where you plan to use ng-grid, add:
<div class="gridStyle" ng-grid="gridOptions"></div>gridOptions is the variable we are going to bind to where we will initialize our grid options. - We are going to define a basic style for our grid in style.css:
.gridStyle { border: 1px solid rgb(212,212,212); width: 400px; height: 300px } - In your javascript file within the controller where you plan to use ng-grid, lets add data that our grid will use:
$scope.myData = [{ name: "Moroni", age: 50}, { name: "Tiancum", age: 43}, { name: "Jacob", age: 27}, { name: "Nephi", age: 29}, { name: "Enos", age: 34}]; - Now initialize your grid options under the same controller as data:
$scope.gridOptions = { data: 'myData' }; - Below is the outcome of the grid using the example on the right:
Drag a column header here and drop it to group by that column.
name
age
Choose Columns:
- name 0
- age 0
Moroni
50
Tiancum
43
Jacob
27
Nephi
29
Enos
34
HTML:
- <html ng-app="myApp">
- <head lang="en">
- <meta charset="utf-8">
- <title>Getting Started With ngGrid Example</title>
- <link rel="stylesheet" type="text/css" href="ng-grid.css" />
- <link rel="stylesheet" type="text/css" href="style.css" />
- <script type="text/javascript" src="jquery-1.8.2.js"></script>
- <script type="text/javascript" src="angular.js"></script>
- <script type="text/javascript" src="ng-grid-1.3.2.js"></script>
- <script type="text/javascript" src="main.js"></script>
- </head>
- <body ng-controller="MyCtrl">
- <div class="gridStyle" ng-grid="gridOptions">
- </div>
- </body>
- </html>
CSS:
- /*style.css*/
- .gridStyle {
- border: 1px solid rgb(212,212,212);
- width: 400px;
- height: 300px
- }
Javascript:
- // main.js
- var app = angular.module('myApp', ['ngGrid']);
- app.controller('MyCtrl', function($scope) {
- $scope.myData = [{ name: "Moroni", age: 50},
- { name: "Tiancum", age: 43},
- { name: "Jacob", age: 27},
- { name: "Nephi", age: 29},
- { name: "Enos", age: 34}];
- $scope.gridOptions = { data: 'myData' };
- });
View the plunker .