2015-11-08 66 views
0

我有一个ng-repeat是循环通过注释的数组:角NG-重复和增加新的元素添加到数组

<li ng-repeat="comment in ad.comments | limitTo:quantity| orderBy : sortComment : true"> 
     {{comment.uid}} 
     <strong style="display: inline;">{{comment.title}}</strong> {{comment.posted| date}} 
     <p readMore> {{comment.text|truncate: textLength }} 
      <a ng-show="comment.text.length>25" ng-click="changeLength(textLength)" class="color3"><strong id="moreLessButton">{{moreLessText}}</strong></a> 
     </p> 
     </li> 

comments阵列是由$http电话,我的问题是:什么为t这个数组他正确的方式来触发用户添加新评论后ng-repeat循环?将一个$watch添加到comments数组不起作用。 也推新评论:

$scope.ad.comments.push((addDataToCurrntCommentList)); 

不会导致循环再次启动。 我不想回想一下服务来重新检索所有评论。 添加一条新评论的角度为modal父级的范围子级是ng-repeat循环的控制者。 这里是围绕着一个增加请求HTML代码:

<form id="commentsForm" name="commentsForm" ng-submit="submitComment($event)"> 
    <i class="fa fa-star " ng-click="alertStar(1)" id="1"></i> 
    <i class="fa fa-star " ng-click="alertStar(2)" id="2"></i> 
    <i class="fa fa-star " ng-click="alertStar(3)" id="3"></i> 
    <i class="fa fa-star " ng-click="alertStar(4)" id="4"></i> 
    <i class="fa fa-star " ng-click="alertStar(5)" id="5"></i> 
    <fieldset> 
     <legend>{{AdDetailsWords.commentPostTitleLng[languageServ.current]}}</legend> 
      <label class="control-label">{{AdDetailsWords.commentTitleLng[languageServ.current]}}*</label> 
      <textarea class="form-control" name="comment" cols="3" rows="1" id="commentTitle-textarea" tabindex="1" ng-model="commentTitle" required ></textarea> 
      <div class="control-field"> 
       <label class="control-label">{{AdDetailsWords.commentTextLng[languageServ.current]}}*</label> 
       <textarea class="form-control" cols="4" rows="5" name="comment" id="comment-textarea" tabindex="3" ng-model="commentText" required></textarea> 
      </div> 
     </div> 
     <div class="form-group button-group"> 
      <div class="control-field"> 
       <button type="submit" class="btn btn-primary btn-comment" tabindex="4" >{{AdDetailsWords.commentPostLng[languageServ.current]}}*</button> 
      </div> 
     </div> 
    </fieldset> 
</form> 

和控制器:

angular.module('mean.rank').controller('formController', function ($scope, OkianoData, CommentsService, $modalInstance, $modal, Global, items, $timeout, Languages) { 
    var addDataToCurrntCommentList = {}; 
    var postCommentDataToServer = {}; 
    $scope.languageServ = Languages; 
    console.log("OkianoData:",OkianoData) 
    OkianoData.getAdDetailsWords().then(function(listWords) { 
     console.log(listWords); 
     $scope.AdDetailsWords = listWords; 
    },function(reason) { 
     alert(reason); 
    }); 
    console.log("AdDetailsWords: ",$scope.AdDetailsWords); 
    $scope.ad = items[0]; 
    $scope.items = items; 
    $scope.selected = { 
     item: $scope.items[0] 
    }; 
    $scope.submitComment = function (event) { 
      event.preventDefault(); 
      postCommentDataToServer.nid = $scope.ad.nid; 
      postCommentDataToServer.uid = Global.user.uid; 
      postCommentDataToServer.posted = new Date(); 
      postCommentDataToServer.title = document.getElementById('commentTitle-textarea').value; 
      postCommentDataToServer.text = document.getElementById('comment-textarea').value; 
      //to current list 
      // 
      addDataToCurrntCommentList.author = Global.user._id; 
      addDataToCurrntCommentList.posted = new Date(); 
      addDataToCurrntCommentList.title = document.getElementById('commentTitle-textarea').value; 
      addDataToCurrntCommentList.text = document.getElementById('comment-textarea').value; 
      //$scope.ad.comments.push((addDataToCurrntCommentList)); 
      CommentsService.postComment(postCommentDataToServer) 
       .then(function() { 
         //console.log("adding : ", addDataToCurrntCommentList) 
        }); 

      $scope.finally(); 
    }; 
    $scope.finally = function(){ 
     $scope.commentTitle = ""; 
     $scope.commentText = ""; 
     $modalInstance.close(''); 

    } 
    $scope.$watch('openAuto', function() { 
     $scope.openAuto = false; 
    }); 
    $scope.alertStar = function(val){ 
     addDataToCurrntCommentList.stars = val; 
     postCommentDataToServer.stars = val; 
     console.log("To server: ",postCommentDataToServer.stars); 
     console.log("To list: ",addDataToCurrntCommentList.stars); 
     for(var i=1;i<=val;i++) 
     { 
      document.getElementById(i).style.color='red'; 
     } 
     for(var j=5;j>val;j--) 
     { 
      document.getElementById(j).style.color=''; 
     } 

    }; 
}); 
+0

如果将项目添加到数组中,则ng-repeat应呈现它。也许你正在通过JQuery添加它? –

+0

不用开玩笑吧。 –

+0

试着做'$ scope。$ apply();' – weirdpanda

回答

0

我有几分相同的实现和我做的是我已经建立了数据的加载在loadData函数中。一旦完成了注释的“推送”(假设通过$ http.post),我只需再次运行loadData()。

适合我,并希望这有助于(虽然现在我看到日期,这是两岁)。知道你是如何解决这个问题会很有趣。