AngularJs Grid -将代码放在事件下时不起作用
下面是代码。
工作版本-网格显示和页面加载。
<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‘
回答 3
Stack Overflow用户
发布于 2013-06-28 07:45:25
您的ng网格在您实例化$scope.gridOptions之前进行初始化，因此它会抛出未定义的错误。此外，如果以编程方式更改$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示例页面的编辑过的http://plnkr.co/edit/SnJ9J0?p=preview，用来展示它的工作原理：
Stack Overflow用户
发布于 2013-06-28 07:00:58
将标签移动到最后一个标签之前(加载速度也会更快)。
我推测这个错误是因为javascript在html准备好之前就加载了。
控制台错误日志还说明了什么吗？
Stack Overflow用户
发布于 2014-06-30 07:22:20
在数据实际到达之前定义gridOptions是可以的。这就是Angular绑定数据的方式的美妙之处-只需将数据设置为最终拥有数据的$scope对象-网格将足够智能，可以通过数据项上的内部$watch进行自我更新。
https://stackoverflow.com/questions/17351776
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号