Question

我在点击ng-repeat中的项目时遇到问题。会发生的是，当我点击一个图标时，它应该显示一个隐藏的div，每个项目都有一个div。问题是，如果确实显示隐藏的div但滚动失败，那么降低所有信息的成本很高。我用示例代码编写了一个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

点击显示div ng-repeat项目滚动失败

1 个答案: