[英]Ng-repeat inside ng-repeat angularJS
我正在使用AJAX在angularJS中進行項目,這是一個具有類似按鈕的發布/評論系統。 到目前為止,一切工作正常,但要讀取數據庫中的注釋,應該使用第一個讀取帖子的ng-repeat來完成。
我可以通過servicoLeituraComments.php頁面接收到數據良好的json,所有數據都在那里。 我認為問題出在ng-repeat上,但是我不確定當它在另一個內時我應該怎么做,我已經在上面嘗試過“ comments”或“ p.comments”,但均無用。 我在第二次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的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
}
]
所以我在這里看到兩件事。 首先是您要從中獲取注釋的JSON沒有注釋屬性。 如果這樣做,它將是這樣的:
{
"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
}
我看到的第二件事是您有一個帶有ng-model="p.comments"
的<textarea>
。 您是否要使用它向$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的方式。 評論將需要有另一個字段,以了解要附加到哪些帖子。 像這樣:
{
"nome":"joao",
"texto":"12345",
"data":null,
"idPost": "12" //This is how you would know that this comment goes to this post
}
謝謝大家,我設法解決了這個問題,我將兩個ng-repeats分別放在另一個內部,因為我有2個JSON,它們的數據通過ID相互關聯。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.