AngularJs网格 - 不工作时的code进行事件下

本文介绍了AngularJs网格 - 不工作时的code进行事件下的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

下面是code。

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

Working version - Grid displays and page load.

<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>

非工作版本。移动点击一个按钮下的网格code。

Non working version. Moved the grid code under a button click.

<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>

获取错误： - 类型错误：无法设置属性gridDim未定义

Getting the error : - TypeError: Cannot set property 'gridDim' of undefined

推荐答案

在实例$ scope.gridOptions之前，您的NG-网格初始化，因为这样它会引发未定义的错误。另外，如果你编程更改$ scope属性，您可能需要使用$应用让你改变显示在模板。

Your ng-grid is initializing before you instantiate $scope.gridOptions, as as such it throws the undefined error. Also, if you change a $scope property programatically, you may need to use $apply to get your changes to display on the templates.

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

So what you need to do is make sure the data structures exist (even if they're empty) and call $apply when "starting" the data-grid:

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();
        }
    });

下面是经编辑plunkr从ngGrid例子页面，显示此工作：

Here is an edited plunkr from the ngGrid examples page, to show this working:http://plnkr.co/edit/SnJ9J0?p=preview

这篇关于AngularJs网格 - 不工作时的code进行事件下的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！