带有Java后端的angularjs
带有Java后端的angularjs
提问于 2014-08-05 12:57:35
我正在尝试从服务器(servlet)获取json格式的数据并添加到表中。数据成功地从服务器端获得，当我使用console.log(数据)时，它打印数据，但没有将数据添加到表中。
module.js：
var module = angular.module('myApp', []);
module.service('ContactService', function($http) {
var contacts = [{ }];
this.getContacts = function($http) {
var response = $http.get("/PersonalDetail/AngularServlet");
response.success(function(data, status, header, config) {
contacts=data;
console.log("contacts: " + contacts);
return contacts;
});
response.error(function(data, status, header, config) {
return null
});
return contacts;
}
this.list = function($http) {
return this.getContacts($http);
}
});controller.js
module.controller("ContactController", function($scope,$http,ContactService) {
$scope.contacts=ContactService.list($http);
}index.html
<html data-ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!--<title>JSP Page</title>-->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js" type="text/javascript"></script>
<script src="js/module/module.js" type="text/javascript" ></script>
<script src="js/controller/controller.js" type="text/javascript" ></script>
</head>
<body>
<div data-ng-controller="ContactController">
<table class="table table-striped table-bordered" bgcolor="orange" border="1">
<thead>
<tr>
<th>Name </th>
<th>Email </th>
<th>Phone </th>
<th>Action </th>
</tr>
</thead>
<tbody>
<tr ng-repeat="contact in contacts">
<td>{{ contact.name}}</td>
<td>{{ contact.email}}</td>
<td>{{ contact.phone}}</td>
</tr>
</tbody>
</table>
</div>
</body>
回答 3
Stack Overflow用户
发布于 2014-08-05 13:05:42
这里有一个在Angular中处理promises的合适方法。在控制器中：
module.controller("ContactController", function($scope, $http, ContactService) {
ContactService.list().then(function(data) {
$scope.contacts = data;
});
}然后修改服务：
module.service('ContactService', function ($http) {
this.getContacts = function () {
return $http.get("/PersonalDetail/AngularServlet").then(function (data, status, header, config) {
return contacts;
}, function (data, status, header, config) {
return null;
});
}
this.list = function () {
return this.getContacts();
}
});然后最重要的是您应该从list方法(和getContacts)返回promise对象。
Stack Overflow用户
发布于 2014-08-05 14:25:52
根据我的说法，在现有代码中，只需将var contacts ={ };更改为var contacts = [];
或删除
var contacts = [{ }];其次，在$http.get成功的情况下，设置如下联系人：
response.success(function(data, status, header, config) {
$scope.contacts=data;
// console.log("contacts: " + contacts);
// return contacts;
});上面的"dfsq“解决方案也很好，非常适合执行。
Stack Overflow用户
发布于 2014-11-24 20:25:57
你可以尝试下面的方法。这是一种干净且可管理的方式。您需要有作为服务工作的AngularJS工厂，它将委托给控制器类，在那里您的联系人将被推送到自己的数组作用域。然后你可以简单地在前端循环它，然后你就可以得到你的联系人。下面是代码：
服务
var module = angular.module('myApp', []);
module.factory('ContactService', ['$http', function($http) {
return {
//You can add as many REST calls inside this return as you want
getContacts: function(){
return $http.get("/PersonalDetail/AngularServlet").success(function(data){
return data;
})
}
};
});控制器
var module = angular.module('myApp', []);
module.controller('ContactController', ['$http', '$scope', 'ContactService', function($http, $scope, ContactService){
$scope.contacts = [];
ContactService.getContacts().success(function(data){
//Depending on data structure in your REST call you might need first to loop the data
$scope.contacts.push(data);
})
}]);index.html
<div data-ng-controller="ContactController">
<table class="table table-striped table-bordered" bgcolor="orange" border="1">
<thead>
<tr>
<th>Name </th>
<th>Email </th>
<th>Phone </th>
<th>Action </th>
</tr>
</thead>
<tbody>
<tr ng-repeat="contact in contacts">
<td>{{ contact.name}}</td>
<td>{{ contact.email}}</td>
<td>{{ contact.phone}}</td>
</tr>
</tbody>
</table>
</div>希望这能对您有所帮助:)
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/25131455
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号