我正在尝试使用AngularJS服务向WebAPI发出HTTP请求,并使用两个嵌套的ng-repeat(帖子和回复)加载HTML页面。我可以让{{post.displayName}}填充到我的浏览器中,但不会加载回复。任何人都可以协助AngularJS服务没有正确使用JSON正确使用JSON
的JSON从的WebAPI:
[{"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代码片段:
这将返回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像这样的网址:“http:// localhost:59327/posts/details.json”并尝试 – 2014-09-29 21:13:46
尝试说“回复posts.replies”。 – 2014-09-29 21:23:55