【发布时间】：2014-09-29 21:09:07
【问题描述】：
我正在尝试使用 AngularJS 服务向 WebAPI 发出 HTTP 请求，并使用两个嵌套的 ng-repeat（帖子和回复）加载 HTML 页面。我可以让 {{ post.displayName }} 在我的浏览器中填充，但没有加载回复。有人可以帮忙吗？
来自 WebAPI 的 JSON：
[{"postId":1,"displayName":"Scott","message":"message1","replies":{"replyId":1,"displayName":"wayne","message":"test11"}},{"postId":2,"displayName":"Bill","message":"message12","replies":{"replyId":1,"displayName":"bob","message":"test21"}},{"postId":3,"displayName":"Wayne","message":"message12","replies":{"replyId":1,"displayName":"bob","message":"test21"}},{"postId":4,"displayName":"Bonnie","message":"message12","replies":{"replyId":1,"displayName":"bob","message":"test21"}},{"postId":5,"displayName":"Gina","message":"message12","replies":{"replyId":1,"displayName":"bob","message":"test21"}}]
我的服务：
// This handles the database work for posting
gwApp.service('postService', function ($http, $q) {
// ---
// PUBLIC METHODS.
// ---
this.getPosts = function () {
var request = $http({
method: "get",
url: "http://localhost:59327/posts/details",
params: {
action: "get"
}
});
return (request.then(handleSuccess, handleError));
};
// ---
// PRIVATE METHODS.
// ---
// Transform the error response, unwrapping the application dta from
// the API response payload.
function handleError(response) {
// The API response from the server should be returned in a
// nomralized format. However, if the request was not handled by the
// server (or what not handles properly - ex. server error), then we
// may have to normalize it on our end, as best we can.
if (
!angular.isObject(response.data) ||
!response.data.message
) {
return ($q.reject("An unknown error occurred."));
}
// Otherwise, use expected error message.
return ($q.reject(response.data.message));
}
// Transform the successful response, unwrapping the application data
// from the API response payload.
function handleSuccess(response) {
return (response.data);
}
});
我的控制器：
//This controller retrieves data from the services and associates then with the $scope
//The $scope is ultimately bound to the posts view
gwApp.controller('PostController', function ($scope, postService) {
$scope.posts = [];
loadRemoteData();
// public methods
// private methods
function applyRemoteData(newPosts) {
$scope.posts = newPosts;
}
function loadRemoteData() {
// $scope.posts = postService.getPosts();
postService.getPosts()
.then(
function (posts) {
applyRemoteData(posts);
}
);
}
});
我的 HTML 代码 sn-p:
这将返回 3 个空白表格行
<tr data-ng-repeat="reply in post.replies">
<td>
{{ reply.message }}
</td>
</tr>
这会从我的 JSON 中返回有效数据：
<tr data-ng-repeat="post in posts">
<td>
PostId: {{ post.postId }} {{ post.displayName }}
</td>
</tr>
任何帮助将不胜感激！
【问题讨论】：
-
尝试将 .json 添加到您的 url 中，例如：“localhost:59327/posts/details.json”并尝试
-
试着说“在posts.replies中回复”。