ng click show div ng-repeat 项目滚动失败

Question

我在点击 ng-repeat 中的项目时遇到问题。发生的事情是，当我单击一个图标时，它应该显示一个隐藏的 div，每个项目都有一个 div。问题是，如果确实显示了hidden divs，但是滚动失败，那么把所有的信息都往下走，成本会很高。我用示例代码做了一个codepen。

<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

如果你注意到，点击图标显示div但最后成本下降，一定要坚持看好时间或者点击几次，不明白为什么。

Answer 1

您可以使用 $ionicScrollDelegate .resize() 函数，例如；

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

检查此codepen代码； http://codepen.io/anon/pen/GjOXmO

ng click show div ng-repeat 项目滚动失败

ng click show div ng-repeat item scroll failed

angularjs

ionic-framework

angularjs-ng-repeat

angularjs-ng-click