Question

当使用按钮显示this example（从Angular Material文档复制）中的无限滚动时，项目不会出现。

如果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_;
              }));
            }
          }
        };
      });

})();

Answer 1

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

的工作原理。将ng-show更改为style="visibility:hidden/visible"

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

使用ng-show显示时，无限滚动不显示项目

1 个答案: