在ng-repeat angularJS内重复Ng

时间:2017-07-17 21:20:24

标签: javascript jquery angularjs json

我正在使用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
}

2 个答案:

答案 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相互关联。