angular ng-repeat并向数组中添加新元素

时间:2015-11-08 09:05:54

标签: javascript arrays angularjs angularjs-ng-repeat

我有一个ng-repeat循环遍历一系列评论:

<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调用,我的问题是:在用户添加新评论后,他正确地触发ng-repeat循环是什么?在comments数组中添加$watch不起作用。 同时推出新评论:

$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='';
        }

    };
});

1 个答案:

答案 0 :(得分:0)

我有一些相同的实现,我的工作是在loadData函数中设置数据加载。一旦完成评论的“推送”(假设通过$ http.post),我就再次运行loadData()。

适合我,希望这会有所帮助(虽然现在我看到了约会,已经两年了)。知道你是如何解决这个问题会很有趣。