私はAJAXを使ってangularJSのプロジェクトに取り掛かりました。それは、同様のボタンを持つ投稿/コメントシステムです。投稿を読んでいる最初のものの中で2番目のng-repeatを使って行われるはずのDatabaseからのコメントを読むことを除いて、これまでのところすべてが動作しています。ng-repeat内部のNg-repeat angularJS
私は、データservicsLeituraComments.phpに行くと、すべてのデータがjsonを受け取ることができます。私は問題がng-repeatであると思うが、別のものの中にいるときにどうすればいいのか分からない。私はすでに "コメント"や "p.comments"を試していて、何もしていない。また、2番目のng-repeat内に入力したものはページに表示されません。ここにコードがあります。ここで
<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
[
{
"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"
}
]
からJSON配列であり、ここでSERVICからJSON配列でありますoLeituraComments.php
[
{
"nome":"joao",
"texto":"12345",
"data":null},
{
"nome":"joao",
"texto":"1234",
"data":null
}
]
'$ scope.posts'配列の例を挙げることができますか? –
私は質問を編集し、両方のJSons配列を追加しました – ruipascoal