Question

我尝试在angular.js组件上应用 ngInfiniteScroll 。我知道需要使用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()函数（这意味着，当它初始化时只有1个请求，并且不再调用该函数）

Answer 1

您可以这样做 - 将div替换为li：

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

Answer 2

是的，有可能......您只需按照以下代码

即可

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>

Answer 3

你应该直接在＆＃39; li＆＃39;上迭代htmlViews。标签

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

Angular.js：重复HTML数据列表

3 个答案: