我正在使用AJAX处理angularJS中的项目,它是一个带有类似按钮的帖子/评论系统。到目前为止一切都在工作,除了从数据库中读取评论,这些评论应该是在读取帖子的第一个内部使用第二个ng-repeat进行的。
我可以收到json,数据很好,去了页面servicoLeituraComments.php,所有数据都在那里。我认为问题出在ng-repeat上,但是我不确定当它在另一个内部时我怎么想这样做,我已经尝试过“评论”或“p.comments”而没有工作。我在第二次重复重复内输入的任何内容也不会出现在页面上。这是代码。
<script>
var app = angular.module('postsApp', []);
var interval;
app.controller('postsCtrl', function($scope) {
$scope.toggle = false;
$scope.texto = [];
$scope.comment = [];
$scope.comment = "";
$scope.comments = "";
$scope.posts = "";
$scope.texto = "";
$scope.idPost = 0;
$scope.showBox = function(p){
p.toggle = !p.toggle;
if(interval == 0){
interval = setInterval("angular.element($('#postsApp')).scope().servicoLeituraPosts()",1000);
}else{
clearInterval(interval);
interval = 0;
}
servicoLeituraComments(p);
};
$scope.iniciaTimer = function(){
interval = setInterval("angular.element($('#postsApp')).scope().servicoLeituraPosts()",1000);
};
$scope.servicoLeituraPosts = function(){
$.getJSON(
"servicoLeituraPosts.php",
{
},
function(jsonData)
{
$scope.posts = jsonData;
$scope.$apply();
});
};
$scope.servicoLeituraComments = function(p){
$.getJSON(
"servicoLeituraComments.php",
{
"idPost": p.idPost
},
function(jsonData)
{
$scope.comments = jsonData;
$scope.$apply();
});
};
$scope.addPost = function(){
$.post(
"addPostRest.php",
{
"texto" : $scope.texto
},
function(dados)
{
$scope.texto = dados.indexOf("OK") >= 0 ? "" : "FALHOU";
$scope.$apply();
}
);
};
$scope.addLike = function(idPost){
$.post(
"addLike.php",
{
"idPost" : $scope.idPost = idPost
},
function(dados)
{
$scope.texto = dados.indexOf("OK") >= 0 ? "" : "FALHOU";
$scope.$apply();
}
);
};
$scope.addComment = function(p){
$.post(
"addComentarioRest.php",
{
"comment" : p.comment,
"idPost" : p.idPost
},
function(dados)
{
$scope.texto = dados.indexOf("OK") >= 0 ? "" : "FALHOU";
$scope.$apply();
}
);
};
});
</script>
<div class="panel panel-default">
<div class="panel-heading">
POSTS
<a class="btn btn-success pull-right" href="posts.php"><span class="glyphicon glyphicon-refresh"/></a>
</div>
<div class="panel-body">
<div class="form-group">
<label for="texto">Texto::</label>
<textarea ng-model="texto" placeholder="Coloque aqui a mensagem..." class="form-control" rows="5" name="texto"></textarea>
</div>
<button ng-click="addPost()" class="btn btn-success btn-xs" type="button">Enviar</button>
</div>
</div>
<div class="posts" id="posts">
<div class='row ng-scope' ng-repeat="p in posts" >
<div class='col-md-12'>
{{ p.nome }} - {{ p.data }} <p><p>
{{ p.texto }} <p><p>
{{ p.numeroLikes }}
<button ng-click="addLike(p.idPost)" class="btn btn-default btn-xs" type="button">Like</button>
<span class="abrir_comentario" ng-click="showBox(p)">Comentários</span>
<div ng-show="p.toggle" id="comentarios">
<div class="comentarios">
<div class="form-group">
<textarea ng-model="p.comment" placeholder="Coloque aqui a mensagem..." class="form-control" rows="3" name="texto"></textarea>
</div>
<p><p><p><button ng-click="addComment(p)" class="btn btn-success btn-xs" type="button">Enviar</button>
<div class="comments" id="comments">
<div class='row ng-scope' ng-repeat="c in p.comments" >
<div class='col-md-12'>
{{ c.nome }} - {{ c.data }} <p><p>
{{ c.texto }} <p><p>
</div>
</div>
</div>
</div>
</div> <p>
</div>
</div>
</div>
这是来自servicoLeituraPosts.php的JSon数组
[
{
"idPost":"12",
"data":"2017-06-21 01:17:05",
"nome":"joao",
"texto":"Ola",
"idAutor":"3",
"numeroLikes":"3"
},
{
"idPost":"13",
"data":"2017-06-21 01:24:10",
"nome":"joao",
"texto":"Eu sou o joao",
"idAutor":"3",
"numeroLikes":"3"
}
这是来自servicoLeituraComments.php的JSon数组
[
{
"nome":"joao",
"texto":"12345",
"data":null},
{
"nome":"joao",
"texto":"1234",
"data":null
}
答案 0 :(得分:0)
所以我在这里看到两件事。首先,您尝试获取注释的JSON没有comments属性。如果它确实如此:
{
"idPost":"12",
"data":"2017-06-21 01:17:05",
"nome":"joao",
"texto":"Ola",
"idAutor":"3",
"numeroLikes":"3"
"comments": [] //This is missing, these would be p.comments
}
我看到的第二件事是你有<textarea>
ng-model="p.comments"
。您是否尝试使用此功能向$scope.posts
添加评论?如果是这样,您应该将该模型更改为ng-model="newComment"
和addComment()
应该找到$scope.newComment
并将其推送到$scope.posts
试试这个:
ng-click="addComment($index)"
$scope.addComment = function(index){
$scope.posts[index].comments.push($scope.newComment);
$scope.newComment = '';
}
修改强>
如果你在一个JSON中获得帖子,在另一个JSON中获得评论并不重要。我能看到的唯一问题是你的评论JSON的方式。评论需要有另一个字段才能知道要附加哪些帖子。像这样:
{
"nome":"joao",
"texto":"12345",
"data":null,
"idPost": "12" //This is how you would know that this comment goes to this post
}
答案 1 :(得分:0)
谢谢大家,我设法解决了这个问题,我将两个ng-repeats分别处理在另一个内部,因为我有2个JSON,其数据通过ID相互关联。