Scrolling HTML data with angular.js

Question

I'm trying to repeat list having html data with angular.js. And I want to use ngInfiniteScroll.

So I have built a template, like this.

update:

<div class="scroll" id="antTalkList" talk-type="total" view-type="total"
    infinite-scroll='$ctrl.loadMore()' infinite-scroll-distance='2'>
    <ul class="user_list list ng-scope" ng-repeat="item in $ctrl.htmlViews">
        <ng-bind-html ng-bind-html="item"> </ng-bind-html>
</ul>
</div>

As you can see above, I don't know how to repeat $ctrl.htmlViews inside ul. each htmlViews's item is filled with HTML data above.

<li ... > ... </li> ... <li ... > ... </li>

This is my antList component. In controller, htmlViews is pushed by ajax call when the controller is initialized and scrolled(loadMore function).

ng-repeat seems okay, maybe It works well. However, the infinite-scroll is not working. I added infinite-scroll="$ctrl.loadMore()" and infinite-scroll-distance='10'.

LoadMore function is called when initialized, but it doesn't called when I'm scrolling. How can I check this case?

Here is my component snippets.

.component('antList', {
    templateUrl : 'templates/ant-list.html'
    , controller : function AntListController($http, $attrs, $sce){
        var self = this;
        this.htmlViews = [];
        this.loading = false;

        $http({
            method : "GET",
            url : "ant/list?sectionId="+$attrs.talkType+"&pageCount=20&startIndex=0"
        }).then(function mySucces(response) {
            self.htmlViews.push($sce.trustAsHtml(response.data));
        });

        this.loadMore = function(){
            $http({
                method : "GET",
                url : 'ant/list?pageCount=20&startIndex=' 
                    + $('#antTalkList .user_list li').size()
                    + '&sectionId=' +$attrs.talkType
            }).then(function mySucces(response) {
                self.htmlViews.push($sce.trustAsHtml(response.data));
            });
        }
    }
})

@gianlucatursi Hmm, I found it. Maybe I'm a stupid, ng-repeat needs in ul tags. No problems on template. I'll update with another content. — Minkyu Kim
– Minkyu Kim, Commented Aug 30, 2016 at 13:00
ops. i'm sorry. I didn't understand the question. i think the solution below is correct. — gianlucatursi
– gianlucatursi, Commented Aug 30, 2016 at 13:01
@gianlucatursi Nevermind :), Is that okay what I change my question? — Minkyu Kim
– Minkyu Kim, Commented Aug 30, 2016 at 13:04
Actually, loading data when I scrolled is not working well, this is a real problem. — Minkyu Kim
– Minkyu Kim, Commented Aug 30, 2016 at 13:05

cullimorer · Accepted Answer · 2016-08-30 12:58:23Z

1

<div class="scroll" id="antTalkList" talk-type="total" view-type="total"
    infinite-scroll='loadMore()' infinite-scroll-distance='2'>
    <ul class="user_list list ng-scope">
        <li ng-repeat="view in htmlViews">
         {{view}}
        </li>
    </ul>
</div>

answered Aug 30, 2016 at 12:58

cullimorer

7551 gold badge5 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Minkyu Kim Over a year ago

Thank yo so much. You're so fast but I should update my question. :(

Collectives™ on Stack Overflow

Scrolling HTML data with angular.js

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related