Question

我使用了Angular Material的无限滚动，这里定义了：https://material.angularjs.org/latest/demo/virtualRepeat

我的第一个问题是：这个virtualRepeat需要在带有滚动条的div中，还是可以应用到整个页面？我实际上并不想将我的内容放在另一个带有额外滚动条的div中（除了浏览器之外）。

所以，我使用$http，如果我提供的值为0，我的服务会返回30个项目，如果我提供的值为1则返回60，等等。

var _page = 0;
$scope.infiniteItems = {
    numLoaded_: 0,
    toLoad_: 0,

    // Required.
    getItemAtIndex: function(index) {
        if (index > this.numLoaded_) {
            this.fetchMoreItems_(index);
            return null;
        }
        return index;
    },

    // Required.
    // For infinite scroll behavior, we always return a slightly higher
    // number than the previously loaded items.
    getLength: function() {
        return this.numLoaded_ + 5;
    },

    fetchMoreItems_: function(index) {

        // For demo purposes, we simulate loading more items with a timed
        // promise. In real code, this function would likely contain an
        // $http request.

        if (this.toLoad_ < index) {
            this.toLoad_ += 30;
            postFactory.getPastPosts(_page).then(angular.bind(this, function(data) {
                this.numLoaded_ = this.toLoad_;
                _page++;
            }));
        }
    }
};

这是我的HTML

        <md-content flex layout-padding> 

        <div class="virtualRepeatdemoInfiniteScroll">
            <md-list>
                <md-virtual-repeat-container id="vertical-container">
                  <div md-virtual-repeat="post in infiniteItems" md-on-demand="" class="repeated-item" flex="">
                    <md-divider></md-divider>
                    {{post}}
                    <past-post model="post" action="reaction(currentPost, candidate, type)"></past-post>
                  </div>
                </md-virtual-repeat-container>                      

                </span>
            </md-list>
        </div>

    </md-content>

问题是没有任何反应。我没有价值观。问题可能在postFactory.getPastPosts(_page).then(angular.bind(this, function(data) {，因为数据实际上在data.data，但文档中没有任何内容可以显示设置数据的位置和方式。

更新

getPastPosts的代码非常简单：基本$http请求：

function getPastPosts(page) {
    return $http.get(baseUrl + '/api/content/past-posts/' + page)
}

我在应用程序的各个部分使用它，所以毫无疑问它正在运行。

Answer 1

如果数据返回一个值，你可以在getPastPosts（）中得到一个对象。

无限滚动不起作用，因为它不是数组。

infiniteItems必须是数组类型。

尝试这样，

if(data.size == 1){ // I don't know your data structure.
   this.push(data.data);
}else{
   this = data.data
}

角度材质 - 无限滚动不起作用

1 个答案: