javascript - Angular .js : Repeating HTML data list

Question

我试过申请 ngInfiniteScroll 在 angular.js 组件上。我知道需要使用 ng-repeat ，实际上我不知道如何应用它。

在我的例子中，数据被构建为用于重复的 HTML 文档。每个 $ctrl.htmlViews像这样的数据。

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

我想将这些文档附加到 <ul> 中下面。

<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>

这是我的 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));
            });
        }

    }
})

$http 的结果ajax 请求，已经内置在 HTML 代码中，如下所示。

<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
...

我认为标签有 ng-repat被修复了，所以我写了像上面的代码。但是，我不想使用 <div ng-repeat= ....></div> .因为那样的话，结果页面就会是这样的。

<ul ...>
  <div>
   <li ...>
    ...
  </div>
  <div>
   <li ...>
    ...
  </div>
</ul>

我觉得这看起来很糟糕。我如何在没有附加标签的情况下重复 div ？

还有一个问题。

我声明了infinite-scroll='$ctrl.loadMore()' infinite-scroll-distance='1'但是 angular.js 不调用 loadMore() function after loaded(意思是初始化时只请求1次，不再调用该函数)。

Answer 1

你可以这样做 - 用 li 替换 div:

<ul>
  <li ng-repeat="item in $ctrl.htmlViews">
    <ng-bind-html ng-bind-html="item"> </ng-bind-html>
  </li>
</ul>

也可以使用 ng-bind-html 作为属性:

<ul>
  <li ng-repeat="item in $ctrl.htmlViews" ng-bind-html="item"></li>
</ul>