如何使用角度js,没有闪烁的ajax加载注释点击按钮上的注释

时间:2015-09-18 05:00:38

标签: javascript jquery ajax angularjs

enter image description here

我有以下评论部分当我点击加载以前的评论/点击加载prevoius点击页面滚动顶部但评论加载成功,但我想加载以前的评论没有任何页面滚动运动和页面闪烁任何帮助将不胜感激。 我使用下面显示的代码。

   <div id="loadComment" style="height: 20px; margin-top: 10px;" ng-click="viewPreviousComments()" ng-hide="commentIndex==CommentData.length?true:false">
            <span style="padding: 0px 0px 0px 15px;"><a href="#">Load previous comments</a>
            </span><span style="float: right; padding: 0px 15px 0px 0px;"><span style="color: #fe6600;" ng-bind="commentIndex > CommentData.length ? CommentData.length : commentIndex"></span>&nbsp;of&nbsp;<span style="color: #fe6600;" ng-bind="CommentData.length"></span></span>
        </div>
        <div class="row comments  gsc-background" ng-repeat="comment in CommentData" ng-show="$index < commentIndex" style="padding: 0px 0px 0px 10px;">
            <img id="Img1" ng-src="{{comment.Image}}">
            <div class="col-xs-12 col-md-11">
                <div class="member" style="padding-top: 5px;">
                    <a href="#" ng-bind="comment.CommentedBy"></a>
                    <span ng-bind="comment.Comment"></span>
                </div>
            </div>
            <div class="col-xs-12 col-md-11">
                <div class="member">
                    <time ng-click="focusSubCommentBox(comment.PKCommentID)" style="padding-left: 3px;" class="reply-like">Reply</time>&nbsp;&nbsp;-
                    <time ng-click="likeComment(comment.PKCommentID,false)" style="margin-left: 2px;" class="reply-like" ng-bind="comment.LikeUnlike"></time>
                    <i ng-show="comment.Likes > 0 ? true : false" style="border-left: 2px dotted rgba(254, 102, 0, 1); border-right: 2px dotted rgba(254, 102, 0, 1); padding: 0px 5px 0px 5px; margin: 0px 3px 0px 3px;" class="fa fa-thumbs-o-up">&nbsp;<span ng-bind="comment.Likes"></span></i>&nbsp;-
                <time ng-bind="comment.CommentDate |timeago"></time>
                </div>
            </div>

        </div>

   var app = angular.module('app', ['ngtimeago']);
    var id = document.URL.split("/")[4];
    var defaultUrl = '<%=ResolveUrl("~/ShowContent.aspx")%>';
    app.controller('formCtrl', function ($scope, $sce, $timeout) {

        $scope.loadComments = function () {
            $.ajax({
                type: "POST",
                async: false,
                cache: false,
                url: defaultUrl + '/LoadComments',
                data: "{'id':'" + id + "'}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (result) {
                    var loadComments = angular.fromJson(result.d);
                    $scope.CommentData = angular.copy(loadComments);
                    $scope.commentIndex = Math.round(((25 / 100) * $scope.CommentData.length));
                }
            });
        };
        $scope.viewPreviousComments = function () {

            function innerFilter() {
                if ($scope.commentIndex == Math.round(((25 / 100) * $scope.CommentData.length))) {
                    $scope.commentIndex = Math.round(((50 / 100) * $scope.CommentData.length));
                }
                else if ($scope.commentIndex == Math.round(((50 / 100) * $scope.CommentData.length))) {
                    $scope.commentIndex = Math.round(((75 / 100) * $scope.CommentData.length));
                }
                else {
                    $scope.commentIndex = $scope.CommentData.length;
                }


                $('html, body').animate({
                    'scrollTop': $("#loadComment").position().top
                }, 500).slideDown(500);

            }
            $scope.filtering = false;
            $timeout(innerFilter, 2500);

        };
    });

1 个答案:

答案 0 :(得分:0)

我们可以使用ajax调用加载,然后使用UL LI TAGS绑定...附加选项..

快乐编码......!@

的Dinesh