0

这是代码。

工作版本 - 网格显示和页面加载。

<html ng-app="myApp">
<head lang="en">
    <meta charset="utf-8">
    <title>Getting Started With ngGrid Example</title>
    <link href="http://localhost:4090/Content/ng-grid.min.css" rel="stylesheet" type="text/css" />
    <script src="http://localhost:4090/Scripts/jquery-1.9.1.min.js" type="text/javascript"></script>
    <script src="http://localhost:4090/Scripts/angular.js" type="text/javascript"></script>
    <script src="http://localhost:4090/Scripts/ng-grid-2.0.6.min.js" type="text/javascript"></script>
    <script>
        // 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' };
        });

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

非工作版本。在按钮单击下移动了网格代码。

<html ng-app="myApp">
<head lang="en">
    <meta charset="utf-8">
    <title>Getting Started With ngGrid Example</title>
    <link href="http://localhost:4090/Content/ng-grid.min.css" rel="stylesheet" type="text/css" />
    <script src="http://localhost:4090/Scripts/jquery-1.9.1.min.js" type="text/javascript"></script>
    <script src="http://localhost:4090/Scripts/angular.js" type="text/javascript"></script>
    <script src="http://localhost:4090/Scripts/ng-grid-2.0.6.min.js" type="text/javascript"></script>
    <script>
        // main.js
        var app = angular.module('myApp', ['ngGrid']);
        app.controller('MyCtrl', function ($scope) {
            $scope.LoadGrid = function () {
                alert('');
                $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' };
            }
        });

    </script>
</head>
<body ng-controller="MyCtrl">
    <button id="click" ng-click="LoadGrid()">
        Load Grid</button>
    <div class="gridStyle" ng-grid="gridOptions">
    </div>
</body>
</html>

收到错误：-TypeError：无法设置未定义的属性“gridDim”

4

3 回答 3

10

在实例化 $scope.gridOptions 之前，您的 ng-grid 正在初始化，因此它会引发未定义的错误。此外，如果您以编程方式更改 $scope 属性，您可能需要使用 $apply 让您的更改显示在模板上。

所以你需要做的是确保数据结构存在（即使它们是空的）并在“启动”数据网格时调用 $apply ：

app.controller('MyCtrl', function ($scope) {
        $scope.myData = [];
        $scope.gridOptions = { data: 'myData' };
        $scope.LoadGrid = function () {
            alert('');
            $scope.myData = [{ name: "Moroni", age: 50 },
                 { name: "Tiancum", age: 43 },
                 { name: "Jacob", age: 27 },
                 { name: "Nephi", age: 29 },
                 { name: "Enos", age: 34}];
            $scope.$apply();
        }
    });

这是来自 ngGrid 示例页面的编辑 plunkr，以显示此工作： http ://plnkr.co/edit/SnJ9J0?p=preview

于 2013-06-27T23:45:25.423 回答
0

将标签移到最后一个之前（加载速度也会更快）。

我认为错误是因为 javascript 在 html 准备好之前加载。

控制台错误日志是否还有其他内容？

于 2013-06-27T23:00:57.890 回答
0

在数据实际到达那里之前定义您的 gridOptions 是可以的。这就是 Angular 绑定数据方式的精彩部分——只需将数据设置为 $scope 对象，该对象最终将拥有数据，您的网格将足够智能，可以通过数据项上的内部 $watch 更新自身。

于 2014-06-29T23:22:19.920 回答