ng-repeat angularJS 中的 ng-repeat
Posted
技术标签:
【中文标题】ng-repeat angularJS 中的 ng-repeat【英文标题】：Ng-repeat inside ng-repeat angularJS 【发布时间】：2017-12-22 13:24:23 【问题描述】：我正在使用 AJAX 在 angularJS 中开发一个项目，它是一个带有类似按钮的帖子/评论系统。到目前为止一切正常，除了从数据库中读取 cmets 应该使用第二个 ng-repeat 在第一个读取帖子的数据库中完成。
我可以收到带有数据的 json，转到页面 servicoLeituraComments.php，所有数据都在那里。我认为问题出在 ng-repeat 但我不确定当它在另一个里面时我应该怎么做，我已经尝试过 "cmets" 或 "p.cmets" 并且没有工作。此外，我在第二个 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
]
【问题讨论】：
你能举个例子说明$scope.posts数组是什么样子的吗？
我编辑了问题并添加了两个 JSons 数组
【参考方案1】：
所以我在这里看到了两件事。首先是您尝试从中获取 cmets 的 JSON 没有 cmets 属性。如果是这样，它会是这样的：
"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"。您是否尝试使用它来将 cmets 添加到 $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 中获取 cmets，这并不重要。我能看到的唯一问题是您的 cmets JSON 的方式。需要有另一个字段让 cmets 知道要附加到哪些帖子。像这样：
"nome":"joao",
"texto":"12345",
"data":null,
"idPost": "12" //This is how you would know that this comment goes to this post
【讨论】：
在这种情况下，我的问题是我是否必须在获取帖子的同一个 mysql 查询上获取 cmets？或者是否可以将 cmets json 保存到帖子中？因为我应该加载与帖子分开的 cmets 并且不确定它是否以这种方式工作 我这样做了，json 现在显示 idPost，但我看不到 cmets 将如何附加到帖子，我还需要更改 addComment 功能吗？ 当你加载数据时，你可以做一个嵌套的 forEach。见这里：codepen.io/anon/pen/QgRZEp 现在，每个帖子都应该有一个 cmets 数组，每个帖子都会被排序。 ng-repeat 中的 p.cmets 现在也应该可以工作了。这不是最有效的方法，但除非您的 JSON 非常庞大，否则这无关紧要。【参考方案2】：谢谢大家，我设法解决了这个问题，我将两个 ng-repeats 单独处理，一个在另一个内部，因为我有 2 个 JSON，其中的数据通过 ID 相互关联。
【讨论】：
以上是关于ng-repeat angularJS 中的 ng-repeat的主要内容，如果未能解决你的问题，请参考以下文章
由于 angularjs 中的 ng-repeat 导致的错误
AngularJs 使用自定义 Json 中的 ng-repeat 创建表
Angularjs - 如何“ng-repeat”一个 div 以获取“ng-model 中的值”-times？