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()
                    + '&sectionId=' +$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).

score 1 · Answer 1 · answered Aug 31 '16 at 10:34

1

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>

answered Aug 31 '16 at 10:34

Tony Barnes

2,556
1
16
28

Is there any way without outside tag(s) with ng-bind-html ? – Minkyu Kim Aug 31 '16 at 10:53
`item` is built as HTML code already, like `

Minkyu Kim

Aug 31 '16 at 10:53

score 1 · Answer 2 · answered Aug 31 '16 at 10:37

1

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>

answered Aug 31 '16 at 10:37

Akhaya Satapathy

124
2
8

Sorry, I think it is not I want. The `x` have to built in HTML code containing `
` elements

Minkyu Kim

Aug 31 '16 at 10:43

Can u please explain. Do you want to all repeated List Item should be added by dynamically?? – Akhaya Satapathy Aug 31 '16 at 11:37

Yes, It shuld be. because it such as scrolling pagination like facebook or twitter. – Minkyu Kim Aug 31 '16 at 11:56

score 1 · Answer 3 · edited Aug 31 '16 at 12:08

1

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>

edited Aug 31 '16 at 12:08

Akhaya Satapathy

124
2
8

answered Aug 31 '16 at 10:39

viveso

41
5

This is same Akhaya's answer. the `item` is build already as HTML data. Sorry. – Minkyu Kim Aug 31 '16 at 10:52
1

Are the $ctrl.htmlViews strings in the controller? htmlViews[0] = ""; – viveso Aug 31 '16 at 11:03
Yes, htmlViews[0] == '
..'

Minkyu Kim

Aug 31 '16 at 11:05

1

I've modified the plnkr provided by Angular documentation https://plnkr.co/edit/TTBH8Hcg7QPIVCCmB4CF?p=preview Is this what you need? The "items" are strings containing HTML code – viveso Aug 31 '16 at 11:16

Oh, please see this. https://plnkr.co/edit/Ij1i4jleeXw019Q2as6e?p=preview , I would be shown as `result.html`. Thank you kindly answer @OriolVives – Minkyu Kim Aug 31 '16 at 11:34

I'm not really sure if this will work. I hope so. Depends on how you're receiving the data from http call. https://plnkr.co/edit/vMOCZRJ4Pwx4qfYhbvIg?p=preview – viveso Aug 31 '16 at 11:58

I changed result data to json, now working. but this is not I want. Anyway. I am so appreciate your kindness @OriolVives – Minkyu Kim Sep 06 '16 at 07:58

Angular.js: Repeating HTML data list

3 Answers3