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()
+ '§ionId=' +$attrs.talkType
}).then(function mySucces(response) {
self.htmlViews.push($sce.trustAsHtml(response.data));
});
}
}
})
<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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.