2015-11-08 90 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()。

適合我,並希望這有助於(雖然現在我看到日期,這是兩歲)。知道你是如何解決這個問題會很有趣。