无法打印 controller.js 获取的数据
Unable to print the data fetched by the controller.js
我是新手,我正在尝试制作一个虚拟联系人列表。
我打印了从 mongodb 获取数据的日志,我可以在浏览器控制台中看到正确的数据,但是当我尝试在 html 文件中打印它时,它不显示。
以下是片段:
controller.js
var myApp = angular.module('myApp', []);
myApp.controller('AppCtrl', ['$scope', '$http', function($scope, $http){
$http.get('/contactlist').then(function(response){
console.log("I got the response");
console.log(response); //able to see correct data is fetched in the browser console
$scope.contactlist=response;
});
}])
Table 我尝试打印此数据的地方:
<tbody>
<tr ng-repeat="Contact in contactlist">
<td>{{Contact.name}}</td>
<td>{{Contact.email}}</td>
<td>{{Contact.number}}</td>
</tr>
</tbody>
请说明问题所在。
控制台中显示的响应:
JavaScript 总是同步的。所以这里发生了什么,$scope.contactlist=response;
在 $http.get('/contactlist')...
完成之前执行。这意味着,$scope.contactlist
未定义。为了解决这个问题,
我建议使用 Service
。
var myApp = angular.module('myApp', []);
myApp.controller('AppCtrl', ['$scope', 'dataService', function($scope, dataService){
dataService.contactLists(function(response) {
console.log(response.data);
$scope.contactlist=response.data;
});
});
}])
myApp.service('dataService', function($http) {
this.contactLists = function(callback){
$http.get('/contactlist').then(callback)
}
});
我是新手,我正在尝试制作一个虚拟联系人列表。 我打印了从 mongodb 获取数据的日志,我可以在浏览器控制台中看到正确的数据,但是当我尝试在 html 文件中打印它时,它不显示。
以下是片段:
controller.js
var myApp = angular.module('myApp', []);
myApp.controller('AppCtrl', ['$scope', '$http', function($scope, $http){
$http.get('/contactlist').then(function(response){
console.log("I got the response");
console.log(response); //able to see correct data is fetched in the browser console
$scope.contactlist=response;
});
}])
Table 我尝试打印此数据的地方:
<tbody>
<tr ng-repeat="Contact in contactlist">
<td>{{Contact.name}}</td>
<td>{{Contact.email}}</td>
<td>{{Contact.number}}</td>
</tr>
</tbody>
请说明问题所在。
控制台中显示的响应:
JavaScript 总是同步的。所以这里发生了什么,$scope.contactlist=response;
在 $http.get('/contactlist')...
完成之前执行。这意味着,$scope.contactlist
未定义。为了解决这个问题,
我建议使用 Service
。
var myApp = angular.module('myApp', []);
myApp.controller('AppCtrl', ['$scope', 'dataService', function($scope, dataService){
dataService.contactLists(function(response) {
console.log(response.data);
$scope.contactlist=response.data;
});
});
}])
myApp.service('dataService', function($http) {
this.contactLists = function(callback){
$http.get('/contactlist').then(callback)
}
});