угловой нг-повтор и добавление нового элемента в массив

0

У меня есть 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 call, мой вопрос: что это за массив, который он правильно запускает цикл ng-repeat после того, как пользователь добавил новый комментарий? добавление $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='';
        }

    };
});
  • 0
    Ng-repeat должен отображать его, если вы добавляете элементы в массив. Возможно, вы добавляете его через JQuery?
  • 0
    Есть простой толчок.
Показать ещё 13 комментариев
Теги:
arrays
angularjs-ng-repeat

1 ответ

0

У меня есть одна и та же реализация, и что я делаю, я установил загрузку данных в функцию loadData. Как только "push" комментария выполняется (предполагая через $ http.post), я снова запускаю loadData().

Работает для меня и надеюсь, что это поможет (хотя сейчас я вижу дату, ей два года). Было бы интересно узнать, как вы справились с этим.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню