2015-11-06 85 views
0

当使用按钮显示无法滚动this example(从角项目文档复制)时,项目不显示。使用ng-show显示无限滚动时不显示项目

如果ng-show=ctrl.show更改为ng-show=true,则显示这些项目。

为什么不用ng-show显示项目?

标记

<div ng-controller="AppCtrl as ctrl" ng-cloak="" class="virtualRepeatdemoInfiniteScroll" ng-app="MyApp"> 
    <md-content layout="column"> 
    <p> 
     Display an infinitely growing list of items in a viewport of only 7 rows (height=40px). 
     <br><br> 
     This demo shows scroll and rendering performance gains when using <code>md-virtual-repeat</code>; 
     achieved with the dynamic reuse of rows visible in the viewport area. Developers are required to 
     explicitly use <code>md-virtual-repeat-container</code> as a wrapping parent container. 
     <br><br> 
     To enable infinite scroll behavior, developers must pass in a custom instance of 
     mdVirtualRepeatModel (see the example's source for more info). 
    </p> 

    <button ng-click="ctrl.show=!ctrl.show" style="width:100px">Show</button> 

    <md-virtual-repeat-container id="vertical-container" ng-show=ctrl.show> 
     <div md-virtual-repeat="item in ctrl.infiniteItems" md-on-demand="" class="repeated-item" flex=""> 
     {{item}} 
     </div> 
    </md-virtual-repeat-container> 
    </md-content> 
</div> 

JS

(function() { 
    'use strict'; 

    angular 
     .module('MyApp') 
     .controller('AppCtrl', function($timeout) { 

     // In this example, we set up our model using a plain object. 
     // Using a class works too. All that matters is that we implement 
     // getItemAtIndex and getLength. 
     this.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_ += 20; 
       $timeout(angular.noop, 300).then(angular.bind(this, function() { 
       this.numLoaded_ = this.toLoad_; 
       })); 
      } 
      } 
     }; 
     }); 

})(); 

回答

3

http://codepen.io/anon/pen/KdxjvM

作品。改变ng显示为style="visibility:hidden/visible"

我认为它与初始列表的滚动距离有关。当它不可见时,没有高度。在元素可见之前计算此高度。