2016-05-23 83 views
1

我使用角材料0.11.2并试图用虚拟重复。角材料设计虚拟重复过滤器数据

代码的HTML部分是

<div layout="row" flex class="md-padding" style="padding-bottom:0;"> 
    <md-input-container> 
     <div layout="row"> 
      <div layout="column"> 
       <label>Arama</label> 
       <input ng-model="searchCriteria" style="width:300px !important;" type="text"> 
      </div> 
      <div layout="column" flex> 
       <div layout="row"> 
        <md-checkbox class="md-primary" ng-model="filterLocal" aria-label="Local" ng-change=""> 
         Merkez Birimler 
        </md-checkbox> 
       </div> 
      </div> 
     </div>       
    </md-input-container> 
</div> 
<md-content class="md-padding divInfiniteScroll" layout="column"> 
    <md-virtual-repeat-container id="distributionItemInfiniteScrollContainer" flex> 
     <div md-virtual-repeat="item in testData" md-on-demand class="repeated-item" flex> 
      {{item.Id}} 
     </div> 
    </md-virtual-repeat-container> 
</md-content> 

和JavaScript部分是;

$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_ + 10; 
    }, 
    fetchMoreItems_: function(index) { 
     if (this.toLoad_ < index) { 
      this.toLoad_ += 10; 

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

      var that = this; 
      $myService.search(searchObject, index).then(function complete(data) { 
       that.items = that.items.concat(data); 
       that.numLoaded_ = that.toLoad_; 
      }); 
     } 

    } 
}; 

我想筛选具有复选框状态和来自文本元素的数据的虚拟滚动数据。例如,最初虚拟重复有1000行,包括本地和远程,如果我检查复选框,只有从服务(远程数据库)获取本地,如果取消选中。或者在输入中写入某些内容,必须再次更改数据。但我没有任何想法去做。该文档不包含任何有关这方面的信息,有任何想法?请向我提供一些信息。谢谢。

回答

0

我解决了它,在fetchMoreItems_函数中,我将下面的代码写入服务调用完成方法的第一行,然后当数据完成时滚动停止。

if (!data || data.length == 0) { 
    return false; 
}