ng點擊顯示格式 - 重複項滾動失敗

我在點擊ng-repeat內的項目時遇到問題。發生什麼事是，當我點擊一個圖標時，它應該顯示一個隱藏的div，每個項目都有一個div。問題是，如果確實顯示隱藏的div，但滾動失敗，則需要花費很多時間去查看所有信息。我用示例代碼製作了一個codepen。ng點擊顯示格式 - 重複項滾動失敗

<ion-view view-title="Fechas"> 
<ion-nav-bar class="bar-positive" align-title="center"> 
    <ion-nav-back-button class="button-clear"> 
     <i class="ion-ios-arrow-back button-icon"></i> 
    </ion-nav-back-button> 
</ion-nav-bar> 
<ion-content> 
    <div class="list" style="margin-bottom: -1px;height:100%;" ng-repeat="fecha in torneo.fechas"> 
     <a class="item item-icon-right"> 
     {{fecha.fecha_nombre}} 
      <div class="buttons"> 
       <i class="icon" ng-click="showDetails = ! showDetails" ng-class="{'icon ion-chevron-up': showDetails, 'icon ion-chevron-down': !showDetails}"></i> 
      </div> 
     </a> 
     <div ng-show="showDetails" id="elementoTorneo"> 
      <div class="item item-image" style="border-bottom-width: 0px;"> 
       <img class="full-image" style="border-bottom-width: 0px;" ng-src="{{(torneo.torneo_afiche != '') ? 'data:image/jpeg;base64,'+torneo.torneo_afiche : './img/sin_afiche.png'}}"> 
      </div> 
      <br> 
      <div class="row" ng-show="showDetails" style=" padding: 1px !important;"> 
       <div class="item item-divider" style="width: 100%;text-align: center;background-color:#6ca4ea;color:white;padding-bottom: 15px;padding-top: 10px;"> 
        Club 
       </div> 
      </div> 
      <div class="row" style="text-align:center;"> 
       <div class="col" > 
        <a class="item item-torneo"> 
         <i class="icon ion-location"></i> 
         <p>{{fecha.fecha_club_nombre}}</p> 
        </a> 
       </div> 
      </div> 
      <div class="row" style=" padding: 1px !important;"> 
       <div class="item item-divider" style="width: 100%;text-align: center;background-color:#6ca4ea;color:white;padding-bottom: 15px;padding-top: 10px;"> 
        Informaci&oacute;n general 
       </div> 
      </div> 
      <div class="row" style="text-align:center;"> 
       <div class="col col-50" > 
        <a class="item item-torneo"> 
         <i class="icon ion-android-calendar"></i> 
         <p>Inicio fecha</p> 
         <p class="valor_negrita">{{fecha.fecha_inicio}}</p> 
        </a> 
       </div> 
       <div class="col col-50"> 
        <a class="item item-torneo"> 
         <i class="icon ion-android-calendar"></i> 
         <p>Termino fecha</p> 
         <p class="valor_negrita">{{fecha.fecha_termino}}</p> 
        </a> 
       </div> 
      </div> 
      <div class="row" style="text-align:center;"> 
       <div class="col" style="margin: 0px;"> 
        <a class="item item-torneo"> 
         <i class="icon ion-ios-people"></i> 
         <p>Categorías</p> 
         <p ng-repeat="categoria in categorias_split">- {{categoria}}</p> 
        </a> 
       </div> 
      </div> 
      <div class="row" style="padding: 1px !important;"> 
       <div class="item item-divider" style="width: 100%;text-align: center;background-color:#6ca4ea;color:white;padding-bottom: 15px;padding-top: 10px;"> 
        Inscripci&oacute;n 
       </div> 
      </div> 
      <div class="row" style="text-align:center;"> 
       <div class="col col-50"> 
        <a class="item item-torneo"> 
         <i class="icon ion-android-calendar"></i> 
         <p>Inicio inscripción</p> 
         <p class="valor_negrita">{{fecha.fecha_inscripcion_inicio}}</p> 
        </a> 
       </div> 
       <div class="col col-50"> 
        <a class="item item-torneo"> 
         <i class="icon ion-android-calendar"></i> 
         <p>Termino inscripción</p> 
         <p class="valor_negrita">{{fecha.fecha_inscripcion_termino}}</p> 
        </a> 
       </div> 
      </div> 
      <div class="row" style="text-align:center;"> 
       <div class="col" style="margin: 0px;"> 
        <a class="item item-torneo"> 
         <i class="icon ion-cash"></i> 
         <p>Valor inscripción</p> 
         <p class="valor_negrita">${{ReplaceNumberWithPoints(fecha.fecha_valor_inscripcion)}}</p> 
        </a> 
       </div> 
      </div> 
      <div class="row" style="text-align:center;"> 
       <div class="col" style="margin: 0px;"> 
        <div class="item item-torneo"> 
         <i class="icon ion-man"></i><p>Coordinador</p> 
         <p>{{fecha.fecha_nombre_coordinador}} {{fecha.fecha_apellido_coordinador}}</p> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</ion-content>

Codepen

如果您發現，通過顯示的格但最終成本下降點擊圖標，我們必須堅持的好時機，或進行幾次點擊，不明白爲什麼。

來源

2016-10-04 sioesi

[方法]（http://stackoverflow.com/questions/34605039/ng-show-ng-if-doesnt-update-dom-height-immediately）在另一個論壇帖子溶液。 – sioesi

您可以使用$ ionicScrollDelegate .resize（）函數;

$ionicScrollDelegate.$getByHandle('mainScroll').resize();

檢查此codepen代碼; http://codepen.io/anon/pen/GjOXmO

來源

2016-10-04 14:49:27

ng點擊顯示格式 - 重複項滾動失敗

回答

相關問題