I'm new to angularjs and ng-grid...I'm currently going through a simple exampe for ng-grid, but I can't seem to get it to work.
Here is my html:
<!DOCTYPE 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="https://cdnjs.cloudflare.com/ajax/libs/ng-grid/2.0.11/ng-grid.css" data-semver="2.0.11" data-require="ng-grid@*" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js" data-semver="2.1.1" data-require="jquery@*"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.7/angular.js" data-semver="1.3.7" data-require="angular.js@*"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ng-grid/2.0.11/ng-grid.min.js" data-semver="2.0.11" data-require="ng-grid@*"></script>
<script src="js/controllers.js"></script>
</head>
<body ng-controller="MyCtrl">
<h1>{{title}}</h1>
<div class="gridStyle" ng-grid="gridOptions">
</div>
</body>
</html>
Here is my js:
'use strict';
var app = angular.module('myApp', ['ui.grid']);
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' };
$scope.title = "ng-grid example";
});
I also created an example of my issue in Plunker here: http://plnkr.co/edit/9fEF8sBAMhaMxWimLfTn?p=preview
Thanks!
Shanna
The documentation where you got this from found here incorrectly states the following
var app = angular.module('myApp', ['ui.grid']);
Their plunkr link on that same page has the correct syntax of
var app = angular.module('myApp', ['ngGrid']);
found here.
You are importing ng-grid. So in your module dependencies it should be like this:
var app = angular.module('myApp', ['ngGrid']);
Check this updated plunker
Try this it will work for sure.
This is my 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="style.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="myscript.hs"></script>
<script type="text/javascript" src="angular.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ng-grid/2.0.11/ng-grid.min.js"></script>
</head>
<body ng-controller="MyCtrl">
<div class="gridStyle" ng-grid="gridOptions1" id="grid1"></div>
</body>
</html>
This is my js.
<script>
var app = angular.module('myApp', ['ngGrid']);
app.controller('MyCtrl', function($scope) {
$scope.myData1 = [{name: "Moroni", age: 50, address:"bangalore", pin_code:44555},
{name: "Tiancum", age: 43, address:"mysore", pin_code:74034},
{name: "Jacob", age: 27, address:"bellary", pin_code:88394},
{name: "Nephi", age: 29, address:"ramanagara", pin_code:73883},
{name: "Enos", age: 34, address:"cpt", pin_code:34456}];
$scope.gridOptions1 = { data: 'myData1',
rowHeight: 25,
multiSelect:false,
enableRowSelection: true,
columnDefs: [
{
field: "name",
displayName: "Name",
width: '25%',
height: '50px',
},
{
field: "age",
displayName: "Age",
width: '25%',
height: '50px',
},
{
field: "address",
displayName: "Address",
width: '25%',
height: '50px'
},
{
field: "pin_code",
displayName: "PIN",
width: '25%',
height: '50px',
}
]};
});
</script>
