Angular.js：重复 HTML 数据列表答案

【问题标题】：Angular.js: Repeating HTML data listAngular.js：重复 HTML 数据列表
【发布时间】：2017-01-07 21:22:29
【问题描述】：

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

这是我的控制器代码 sn-p。

.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个请求，不再调用该函数）。

【问题讨论】：

你可以将ng-repeat移动到
标签中，它可以工作：<li ng-repeat="item in $ctrl.htmlViews">

【解决方案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>

【讨论】：

这与阿卡亚的回答相同。 item 已经构建为 HTML 数据。对不起。
$ctrl.htmlViews 是控制器中的字符串吗？ htmlViews[0] = "";
是的，htmlViews[0] == '
..'

我已经修改了Angular文档plnkr.co/edit/TTBH8Hcg7QPIVCCmB4CF?p=preview提供的plnkr，这是你需要的吗？ “项目”是包含 HTML 代码的字符串

哦，请看这个。 plnkr.co/edit/Ij1i4jleeXw019Q2as6e?p=preview ，我将显示为 result.html。谢谢你回答@OriolVives

【解决方案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>

【讨论】：

对不起，我想这不是我想要的。 x 必须内置包含 <li> 元素的 HTML 代码
你能解释一下吗？是否要动态添加所有重复的列表项？？
是的，应该是。因为它就像 facebook 或 twitter 这样的滚动分页。

【解决方案3】：

您可以这样做 - 将 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>

【讨论】：

ng-bind-html 有没有没有外部标签的方法？
item 已经构建为 HTML 代码，例如 <li></li><li></li> ...