Question

这里我试图使用ng-grid在表格中显示我的代码，但是我收到类似

的错误

  GET file:///C:/Users/krishna/Desktop/grid/ng-grids.css net::ERR_FILE_NOT_FOUND
    Uncaught Error: [$injector:modulerr]

     http://errors.angularjs.org/1.3.16/$injector/modulerr?p0=myApp&p1=Error%3A%…gleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.16%2Fangular.min.js%3A17%3A381)

这是我尝试的代码

<html ng-app="myApp">  
  <head lang="en">
    <meta charset="utf-8">
    <title>Getting Started With ngGrid Example</title>            
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>
    <link rel="stylesheet" type="text/css" href="ng-grids.css" />
    <script>
      var app = angular.module('myApp', ['ngGrid','ngRoute']);
      app.controller('MyCtrl', function($scope) {
          $scope.myData = [
              {name: "Ajith", age: 50},
              {name: "rajini", age: 43},
              {name: "araya", age: 27},
              {name: "madi", age: 29},
              {name: "cha", age: 34}
          ];
          $scope.gridOptions = { data: 'myData' };
      });
    </script>
  </head>
  <body ng-controller="MyCtrl">
    <div class="gridStyle" ng-grid="gridOptions"></div>
  </body>
</html>

我必须查看脚本中可用的数据，我是angularjs的新手，用于开发基于网格帮助的应用程序以获取angularjs中的知识

Answer 1

您注入＆＃39; ngGrid＆＃39;，但您从未在您的应用中包含此模块，因此angular无法找到它。您必须在标题中包含以下文件：

NG-grid.js
ng-grid.css如果你想要教程中显示的漂亮样式
的jQuery

一个工作的例子是（参见plunk）：

<html ng-app="myApp">

  <head lang="en">
    <meta charset="utf-8" />
    <title>Getting Started With ngGrid Example</title>
    <link data-require="ng-grid@2.0.14" data-semver="2.0.14" rel="stylesheet" href="https://cdn.rawgit.com/angular-ui/ng-grid/v2.0.14/ng-grid.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>
    <script data-require="jquery@*" data-semver="2.2.0" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <script data-require="ng-grid@2.0.14" data-semver="2.0.14" src="https://cdn.rawgit.com/angular-ui/ng-grid/v2.0.14/build/ng-grid.js"></script>
    <style>
      .gridStyle {
        height: 300px
      }
    </style>
    <script>
      var app = angular.module('myApp', ['ngGrid']);
      app.controller('MyCtrl', function($scope) {
        $scope.myData = [
          {name: "Ajith", age: 50},
          {name: "rajini", age: 43},
          {name: "araya", age: 27},
          {name: "madi", age: 29},
          {name: "cha", age: 34}
        ];

        $scope.gridOptions = {
          data: 'myData'
        };
      });
   </script>
  </head>

  <body ng-controller="MyCtrl">
    <div ng-grid="gridOptions" class="gridStyle"></div>
  </body>

</html>

我删除了＆＃39; ngRoute＆＃39;因为它没有在示例中实际使用，但您可以以类似的方式添加它。

另一方面，ng-grid主页上的插件不起作用，因为它们指向不存在的脚本。这可能是也可能不是，因为ng-grid被折旧以支持其更新的版本ui-grid。

angularjs简单程序中的内联可编辑网格

1 个答案: