Angular.js: Repeating HTML data list
Question
I have tried applying ngInfiniteScroll on angular.js component. I know that needs to use ng-repeat , acutally I don't know how to apply this.
In my case, data is build as HTML document for repeating. Each of $ctrl.htmlViews data like this.
<li ...> ... </li> <li ...> ... </li> ... <li ...> ... </li>
I want to append these documents in <ul> below.
<div class="scroll" id="antTalkList" view-type="total
<ul class="user_list list ng-scope"
infinite-scroll='$ctrl.loadMore()' infinite-scroll-distance='1'>
<div ng-repeat="item in $ctrl.htmlViews"><!-- I don't wanna use this -->
<ng-bind-html ng-bind-html="item"> </ng-bind-html>
</div>
</ul>
</div>
Here is my code snippet of Controller.
.component('antList', {
templateUrl : 'templates/ant-list.html'
, controller : function AntListController($http, $attrs, $sce){
var self = this;
this.htmlViews = [];
this.loading = false;
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));
});
}
}
})
Result of $http ajax request, is already built in HTML code like below.
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
...
I thought a tag having ng-repat is repated, so I wrote code like above code. However, I don't want to use <div ng-repeat= ....></div> . Because that case, result page will be like this.
<ul ...>
<div>
<li ...>
...
</div>
<div>
<li ...>
...
</div>
</ul>
I think this looks awful. How can I repeat whithout additional tag(s) like div ?
One more problem.
I declared infinite-scroll='$ctrl.loadMore()' infinite-scroll-distance='1' but angular.js doesn't calls loadMore() function after loaded(It means, just 1 requests when it's initialized, and no more calls the function).
3 answers
solution1
1 2016-08-31 10:34:41
You can do it like this - replacing div with li :
<ul>
<li ng-repeat="item in $ctrl.htmlViews">
<ng-bind-html ng-bind-html="item"> </ng-bind-html>
</li>
</ul>
Could also use ng-bind-html as an attribute:
<ul>
<li ng-repeat="item in $ctrl.htmlViews" ng-bind-html="item"></li>
</ul>
solution2
1 2016-08-31 10:37:09
Yes it is possible... You just need to follow the below code
var app = angular.module("myApp", []); app.controller("myCtrl", function($scope) { $scope.records = [ "Alfreds Futterkiste", "Berglunds snabbköp", "Centro comercial Moctezuma", "Ernst Handel", ] });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <!DOCTYPE html> <html> <body ng-app="myApp" ng-controller="myCtrl"> <ul> <li ng-repeat="x in records">{{x}}</li> </ul> </body> </html>
solution3
1 2016-08-31 10:39:28
You should iterate htmlViews directly on the 'li' tag
<div class="scroll"
id="antTalkList"
view-type="total"
infinite-scroll='$ctrl.loadMore()'
infinite-scroll-distance='1'>
<ul class="user_list list ng-scope">
<li
ng-repeat="item in $ctrl.htmlViews"
ng-bind-html="item">
</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.