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ですか?

もう1つの問題。

私は宣言しinfinite-scroll='$ctrl.loadMore()' infinite-scroll-distance='1'ましたが、angular.js はロード後に関数を呼び出しませんloadMore()(つまり、初期化時に 1 つの要求だけで、関数を呼び出す必要はありません)。

4

3 に答える 3

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 に答える