基本的 ng-grid 示例不起作用

Question

我是 angularjs 和 ng-grid 的新手...我目前正在研究 ng-grid 的一个简单示例，但我似乎无法让它工作。

这是我的 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>

这是我的 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";
});

我还在 Plunker 中创建了一个问题示例：http://plnkr.co/edit/9fEF8sBAMhaMxWimLfTn?p=preview

谢谢！

莎娜

Answer 1

您正在导入 ng-grid。所以在你的模块依赖中它应该是这样的：

var app = angular.module('myApp', ['ngGrid']);

检查此更新plunker

Answer 2

您从中找到的文档 here 错误地陈述了以下内容

var app = angular.module('myApp', ['ui.grid']);

他们在同一页面上的 plunkr link 具有

的正确语法

var app = angular.module('myApp', ['ngGrid']);

找到 here。

Answer 3

试试这个肯定有用。

这是我的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>

Answer 4

这是我的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>

基本的 ng-grid 示例不起作用

basic ng-grid example not working

angularjs

ng-grid