Mer*_*lin 20 javascript angularjs ng-grid
使用Angular Grid,我在console.log中获取ajax get数据.但是空格.
控制台日志显示:
[13:56:11.411] now!!
[13:56:11.412] []
[13:56:11.412] now!!
[13:56:11.556] <there is data returned from console.log(getData); >
这是js文件.
// main.js
var app = angular.module('myApp', ['ngGrid']);
var getData = [];
function fetchData() {
var mydata = [];
$.ajax({
url:'/url/to/hell',
type:'GET',
success: function(data) {
for(i = 0, j = data.length; i < j; i++) {
mydata[i] = data[i];
}
getData = mydata;
console.log(getData);
}
});
}
fetchData();
app.controller('MyCtrl', function($scope) {
console.log('now!!')
console.log(getData)
console.log('now!!')
$scope.myData = getData
$scope.gridOptions = {
data: 'myData',
showGroupPanel: true
};
});
新Js文件:
// main.js
var app = angular.module('myApp', ['ngGrid']);
app.controller('MyCtrl', function($scope, $http) {
function fetchData() {
$http({
url:'/url/to/hell',
type:'GET'})
.success(function(data) {
$scope.myData = data;
$scope.gridOptions = {
data: 'myData',
showGroupPanel: true
};
});
}
fetchData();
});
HTML文件.
<html ng-app="myApp">
<head lang="en">
<meta charset="utf-8">
<title>Blank Title 3</title>
<link rel="stylesheet" type="text/css" href="http://angular-ui.github.com/ng-grid/css/ng-grid.css" />
<link rel="stylesheet" type="text/css" href="../static/css/style.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
<script type="text/javascript" src="http://angular-ui.github.com/ng-grid/lib/ng-grid.debug.js"></script>
<script type="text/javascript" src="../static/js/main.js"></script>
</head>
<body ng-controller="MyCtrl">
<div class="gridStyle" ng-grid="gridOptions"></div>
</body>
</html>
Ben*_*nmj 26
如果您为请求定义了服务,这将更容易(并且更加Angular).这些方面的东西:
angular.module('hellServices', ['ngResource'])
.factory('Hell', function ($resource) {
return $resource('URL/TO/HELL', {}, {
query: { method: 'GET' }
});
});
确保将其包含在您的应用中:
var app = angular.module('myApp', ['ngGrid', 'hellServices']);
然后你可以在你的控制器中得到它的承诺:
app.controller('MyCtrl', function($scope, $http, Hell) {
$scope.myData = Hell.query();
然后设置网格选项以查看其数据的承诺(正如您已经做过的那样):
$scope.gridOptions = {
data: 'myData',
showGroupPanel: true
};
如果你这样做,你不必担心$ scope.$ apply,因为它会为你处理.这更清洁,更容易遵循.如果从服务器返回数据后仍需要回调来修改数据,请将query()函数传递给服务函数:
...
$scope.myData = Hell.query(function(hell) {
// code that modifies 'hell'
});
查看Angular Services 的官方文档.Angular JS官方教程的第11步也介绍了基础知识.
Jam*_*s M 13
您的控制器可能在.success完成之前访问getData数组.您正在访问变量,在promise函数之外,它被初始化为一个空数组.
为什么不尝试将fetchData函数放入控制器(现在)并将getData直接存储到.success中的$ scope.myData中？也许甚至可以在那里初始化网格？不确定你是否可以这样做,但如果可以,它会是这样的:
app.controller('MyCtrl', function($scope, $http) {
$scope.myData = '';
$scope.gridOptions = { showGroupPanel: true, data: 'myData' };
function fetchData() {
setTimeout(function(){
$http({
url:'/url/to/hell',
type:'GET'})
.success(function(data) {
$scope.myData = data;
if (!$scope.$$phase) {
$scope.$apply();
}
});
}, 3000);
}
fetchData();
});
(某些$ scope应用程序的源代码:https://github.com/angular-ui/ng-grid/issues/39)
也不确定为什么你在jQuery .ajax中混合使用角度代码($ http会这样做),以及为什么你的javascript都没有分号.
| 归档时间： |
|
| 查看次数： |
21668 次 |
| 最近记录： |