Бесконечный свиток не показывает элементы при отображении с помощью ng-show

0

Когда в этом примере отображается бесконечный свиток (скопированный из документов углового материала) с помощью кнопки, элементы не отображаются.

Если 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 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_;
              }));
            }
          }
        };
      });

})();
Теги:
angular-material

1 ответ

3
Лучший ответ

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

работает. Изменено ng-show в style="visibility:hidden/visible"

Я думаю, что это связано с расстоянием прокрутки исходного списка. Когда он не виден, высота отсутствует. И эта высота вычисляется до того, как элемент будет виден.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню