ng重複ng-repeat內部重複angularJS

Question

我正在使用AJAX在angularJS中的項目工作，它是一個類似按鈕的後/評論系統。除了閱讀數據庫中的意見之外，一切都工作至今，這應該是在第一個閱讀帖子的內部使用第二個ng-repeat來完成的。

我可以接收數據良好的json到頁面servicoLeituraComments.php，所有數據都在那裏。我認爲這個問題與ng-repeat有關，但我不確定當它在另一個裏面時我怎麼會這樣做，我已經嘗試過「評論」或「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

[ 
{ 
    "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 
} 

]

Answer 1

因此，有兩件事情我在這裏看到的。首先是您試圖從中獲得評論的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 
} 

Answer 2

謝謝大家，我設法解決這個問題，我分別處理兩種NG-重複一個是另一個裏面，因爲我有2個JSONs數據與相互關聯的ID 。