2016-12-28 78 views
2

我试图在用户保持滚动时为下拉选择设置无限重复。材料角度虚拟重复不显示下拉值

使用$ http尝试沿着这些线。但似乎无法得到它的工作。

$scope.infiniteItems = { 
      numLoaded_: 0, 
      toLoad_: 0, 
      items: [], 

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

      // Required. 
      getLength: function() { 
       return this.numLoaded_ + 25; 
      }, 

      fetchMoreItems_: function (index) { 
       if (this.toLoad_ < index) { 
        this.toLoad_ += 10; 
        AssemblyJigsFactory.getData().then(angular.bind(this, function (obj) { 
         this.items = this.items.concat(obj.data.success.data); 
         this.numLoaded_ = this.toLoad_; 
        })); 
       } 
      } 
     }; 

如果我console.log($scope.infiniteItems);谈到了空,

Object {numLoaded_: 0, toLoad_: 0, items: Array[0]} 

我的HTML是一个简单的对话框会弹出这个加价

<md-input-container class="md-block" flex-gt-sm> 
            <label>Storage Location</label> 
            <md-select ng-model="newJig.storagelocation" placeholder="Storage Location" ng-cloak> 
             <md-option> 
              <md-virtual-repeat-container id="vertical-container"> 
              <div md-virtual-repeat="item in infiniteItems" md-on-demand class="repeated-item" flex> 
               {{item.name}} 
              </div> 
              </md-virtual-repeat-container> 
              </md-option> 
             <div ng-hide="allItems.length">No items found</div> 
            </md-select> 
           </md-input-container> 

storage location只是没有显示任何值。我不确定html设置是否正确。

我已经测试了这个

AssemblyJigsFactory.getData().then(function(res){ 

console.log(res.data.success); 
}); 
自身

和数据不断进来。

Object {total: 50, per_page: 25, current_page: 1, ... 

任何想法?

+0

你能提供一个codepen或什么? – kuhnroyal

回答

0

我有同样的问题,如下更改您的md-input-container

<md-input-container class="md-block" flex-gt-sm> 
    <label>Storage Location</label> 
    <md-select ng-model="newJig.storagelocation" placeholder="Storage Location" ng-cloak> 
     <md-virtual-repeat-container id="vertical-container"> 
      <div md-virtual-repeat="item in infiniteItems" md-on-demand class="repeated-item" flex> 
       <md-option ng-value='item.value'>{{item.name}} 
       </md-option> 
      </div> 
     </md-virtual-repeat-container>               
    <div ng-hide="allItems.length">No items found</div> 
    </md-select> 
</md-input-container> 

希望这可以提供帮助。