sioesi sioesi - 2 months ago 14
AngularJS Question

ng click show div ng-repeat item scroll failed

I am having a problem with click on an item within a ng-repeat. What happens is that when I click on an icon, it should display a div that is hidden, for each item there is a div. The problem is that if indeed shows hidden divs but the scroll fails, it costs a lot to go down all the information. I made a codepen with sample code.

<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

If you notice, by clicking on the icon shown the div but costs down at the end, we must insist a good time or make several clicks and do not understand why.

Answer

you can use $ionicScrollDelegate .resize() function like;

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

check this codepen code; http://codepen.io/anon/pen/GjOXmO

Comments