2017-07-17 27 views
0

私は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 
} 

]

+0

'$ scope.posts'配列の例を挙げることができますか? –

+0

私は質問を編集し、両方のJSons配列を追加しました – ruipascoal

答えて

0

だから私はここで見ています2つのものがあります。 1つは、コメントを取得しようとしている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 
} 

私が見る2つ目は、あなたが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 = ''; 
} 

編集

それがあれば問題ありません。 1つのJSON内の投稿と別のJSON内のコメントを取得します。私が見ることができる唯一の問題は、あなたのコメントJSONの方法です。どの投稿を自分に付けるかを知るためには、コメントのための別のフィールドが必要です。このように:私はIDによって相互に関連したデータと2 JSONsを持っているので

{ 
    "nome":"joao", 
    "texto":"12345", 
    "data":null, 
    "idPost": "12" //This is how you would know that this comment goes to this post 
} 
+0

このケースで私の質問は、私が投稿を取得しているのと同じmysqlクエリでコメントを取得する必要がある場合ですか?それとも、コメントjsonを投稿に保存することは可能ですか?なぜなら、投稿から切り離されたコメントを読み込んで、このように動作しているのかどうかわからないからです。 – ruipascoal

+0

私はこれを行いました.jsonはidPostを表示していますが、投稿にどのようにコメントを付けるか分かりません。 – ruipascoal

+0

データを読み込むと、forEachのネストができます。こちらをご覧ください:https://codepen.io/anon/pen/QgRZEpこれで、各投稿はコメント配列を持ち、各投稿は並べ替えられます。あなたのng-repeatのp.commentsも今でも動作するはずです。これはこれを行う最も効率的な方法ではありませんが、あなたのJSONが非常に巨大でない限り問題にはなりません。 – h01001000

0

はあなたのすべてをありがとう、私は一方が他方の内側にいる個別の両方NG-繰り返しを処理しています、この問題を解決するために管理しました。

関連する問題