1

我尝试在 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>

这是我的控制器代码片段。

.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));
            });
        }

    }
})

ajax 请求的结果$http，已经内置在 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 个请求，并且不再调用该函数）。

4

3 回答 3

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>
于 2016-08-31T10:34:41.673 回答
1

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

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>

于 2016-08-31T10:37:09.190 回答
1

您应该直接在“li”标签上迭代 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>
于 2016-08-31T10:39:28.837 回答