Бесконечный Sroll в c # с помощью AngularJS - PullRequest
Новая
       8

Бесконечный Sroll в c # с помощью AngularJS

0 голосов
/ 27 ноября 2018

Мне нужно реализовать Infinite Scroll в моем коде, используя AngularJS , который отображается с помощью cshtml , нажав API .

Ниже приведен код, который используется для отображения информации из AngularJS и API: 

<div ng-repeat="feed in feedlist">
    <div class="newfeed lstCard J_card">
        <div class="jcard_right" ng-click="IncreaseViewCount(feed.ArticleId)">

            <h4>
                <img src="{{feed.ProfileUrl?feed.ProfileUrl:'/image/placeholder.jpg'}}" class="news_feed_profile_pic" />

                {{feed.FirstName}} {{feed.LastName}}
            </h4>
            <div class="news-feed-heading">
                <p style="word-break:break-word;">{{feed.Description}}</p>


                <div class="img_NewsFeed" ng-click="showimage(feed.Images)">
                    <img ng-if ="feed.Images != 0 && feed.Images != ''"  src={{feed.Images}} width="100px;">
                </div>
                @*</div>*@
            </div>

            <div class="viewnew-comment">
                <p>Number of Times Viewed: {{feed.IsViewed}}</p>

                <span ng-if="feed.hasLiked == 1" class="nf_IsLiked current"><i class="fa fa-thumbs-up" aria-hidden="true"></i>{{feed.IsLiked}} Like</span>

                <span class="nf_IsLiked" ng-if="feed.hasLiked == 0" ng-click="IncreaseLike(feed.ArticleId)"><i class="fa fa-thumbs-up" aria-hidden="true"></i>{{feed.IsLiked}} Like</span>

                <span class="nf_IsShared" ng-click="IncreaseShareCount(feed.ArticleId)">
                    <a class="fa fa-share-alt" href="https://www.addtoany.com/share" aria-hidden="true">{{feed.IsShared}}</a> Share
                </span>

                <span id="addComment" ng-click="AddaComment(feed.ArticleId)"><i class="fa fa-comment" aria-hidden="true"></i>{{feed.CommentCount}} Comments</span>

                <div id="Comment_{{feed.ArticleId}}" style="display:none;">
                    <div ng-repeat="cmt in Comment">
                        <div class="comment-box" ng-if="feed.ArticleId== cmt.ArticleId">
                            <b>{{cmt.FirstName}} {{cmt.LastName}}</b>
                            {{cmt.Comments}}
                            <span class="commentedOn" style="float:right; font-size:12px;">{{cmt.CommentedOn  | date:'MMM dd' }}</span>
                        </div>
                    </div>
                    <div class="add-comment-box">
                        <input type="text" id="comments" name="Comments" ng-model="Comment.Comment" />
                        <button ng-click="AddCommenttoNewsFeed(Comment.Comment, feed.ArticleId)"><i class="fa fa-paper-plane" aria-hidden="true"></i></button>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Ниже приведен мой код для Controller.js : 

UserService.GetNewsFeed().then(function (data) {
    if (data.data.Status) {
        $scope.feedlist = data.data.Results;
    }
    else {
        UserService.showAlert('Oops! Somthing went wrong.', 0);
    }
});

РЕДАКТИРОВАТЬ :

Добавление приведенного ниже кода выполняется в угловом формате: 

$scope.loadMore = function () {
    UserService.GetNewsFeed().then(function (data) {
        if (data.data.Status) {

            $scope.feedlist = data.data.Results;
            var items = $scope.feedlist.length - 1;

            for (var i = 0; i < items; i++) {
                $scope.feedlist.push(items[i].data);
            }
        }
        else {
            UserService.showAlert('Oops! Somthing went wrong.', 0);
        }
    });
}

Ниже приведен код, добавленный в cshtml: 

<div infinite-scroll='loadMore()' infinite-scroll-distance='2'>
...