Question

我正在做一个网络应用程序，我正在使用angular-data-table以无限滚动显示数据。现在，为了测试，我使用的是一个非常小的桌子（高度：150px），我希望每次用户滚动时检索4个项目。但实际上（总是用于测试）我不会将位置索引发送到服务器，所以现在它检索数据库中的所有数据（包含11个项目）。这是代码：

angular.module('app').controller('MyCtrl', ['$scope', 'DataSrv', function ($scope, DataSrv) {
$scope.testData = {
    numLoaded_: 0,
    toLoad_: 0,
    items: [],
    // Required.
    getItemAtIndex: function(index) {
        if (index > this.numLoaded_) {
            this.fetchMoreItems_(index);
            return null;
        }
        return this.items[index];
    },
    // Required.
    // For infinite scroll behavior, we always return a slightly higher
    // number than the previously loaded items.
    getLength: function() {
        return this.numLoaded_ + 2;
    },
    fetchMoreItems_: function(index) {
        if (this.toLoad_ < index) {
            this.toLoad_ += 2;

            var searchObject= {};
            searchObject.SearchCriteria = $scope.searchCriteria;
            searchObject.Local = $scope.filterLocal;

            var that = this;
            DataSrv.getData.get(
                {}, function (data) {
                            that.items = that.items.concat(data);
                            that.numLoaded_ = that.toLoad_;
                }, function (error) {
                    alert(error);
                }
            ); 
        }

    }
};
}]);

HTML：

  <md-virtual-repeat-container>  
  <md-table-container>
    <table md-table>
      <thead md-head>
        <tr md-row>
          <th md-column>Title</th>
        </tr>
      </thead>
      <tbody md-body>
        <tr md-row md-select-id="name" md-auto-select md-virtual-repeat="item in testData" md-on-demand>
          <td md-cell>{{item.title}}</td>
        </tr>
      </tbody>
    </table>
  </md-table-container>
  </md-virtual-repeat-container>

问题是如果我在html代码中写这个

<ul>
 <li ng-repeat="item in testData.items">{{item.title}}</li>
</ul>

如果我是第一次写这个页面，它会显示超过20个项目（重复）。所以它在服务器上调用了很多时间。为什么呢？

Angular-material-data-table不起作用

0 个答案: