Problem with slidebox and ng-repeat in the ionic framework

Question

Problem with slidebox and ng-repeat in the ionic framework

Navigation

#1 by (1 votes)

4

I'm trying to create the slidebox of the ionic framework with data returned from the database and the slide is not appearing on the screen. I already tried the solution for this in many places but I only found that I have to use the ionic update, however it does not work.

Bank data is uploaded and slideshow tags are generated in html, and paging normally occurs, nothing appears on screen, and ionic plays a style in the div.slider-slides tag with "width: 0"

Thanks for any help you can give me.

My code looks like this:

.controller('boletimController', function($scope, $ionicSlideBoxDelegate) {

  $scope.pageClass = 'page-boletim';
  $(".btnVoltar").css('display','inline-block');
  $(".btnVoltar").click(function(event) {
    document.location.href="#page-informativos";
  });
  $scope.previousSlide = function() {
    $ionicSlideBoxDelegate.previous();
  }
  $scope.nextSlide = function() {
    $ionicSlideBoxDelegate.next();
  }


  $scope.data = {};
  $scope.data.slides = [];


  $ionicSlideBoxDelegate.update();

  $.post('URL', function(data, status){
    
    var retorno = JSON.parse(data);

    var txt = "";

    $.each(retorno, function(index, value){  

        slideCounter++;
        $scope.data.slides.push( {
            img : "img/boletim.png",
            title : "Slide " + slideCounter,
            data : "Slide " + slideCounter + ' Content'       
        });
        
        $ionicSlideBoxDelegate.update();

    });

  });
  

  setTimeout(function(){
    var atualPagina = 1;
    $(".nPaginas .atual").html(atualPagina);
    var totalPaginas = $($scope.data).size() + 1;
    $(".nPaginas .total").html(totalPaginas);

    $scope.slideHasChanged = function($index) {
      var atualPagina = $index + 1;
      $(".nPaginas .atual").html(atualPagina);
    }
  }, 100);
});

<ion-slide ng-repeat="item in data.slides | object2Array" class="slider-slide">
  <ion-content>
    <div class="imagem">
      <img style="width: 100%; height: 250px;" src="{{item.img}}">
    </div>
    <div class="conteudo">
      <h4>{{item.title}}</h4>
      <p>{{item.data}}</p>
    </div>
  </ion-content>
</ion-slide>

angularjs ajax ionic

asked by anonymous 11.08.2015 / 15:48

1 answer

Group column sum by quarter How to maintain a web project in synchronization with remote server?

score 1 · Answer 1

After more research I found the solution to my problem.

The solution for me was to put the following code at the end of the controller code:

setTimeout(function(){

    var event = document.createEvent( 'Event' );
    event.initEvent( 'resize', true, true );
    window.dispatchEvent( event );

}, 1000);

The same code could also be done this way:

window.dispatchEvent(new Event('resize'));

But he has reported that this second code does not work on android. I did not test to confirm this.

Follow the complete controller and view code

.controller('boletimController', function($scope, $ionicSlideBoxDelegate) {

  $scope.pageClass = 'page-boletim';
  $(".btnVoltar").css('display','inline-block');
  $(".btnVoltar").click(function(event) {
    document.location.href="#page-informativos";
  });
  $scope.previousSlide = function() {
    $ionicSlideBoxDelegate.previous();
  }
  $scope.nextSlide = function() {
    $ionicSlideBoxDelegate.next();
  }


  $scope.data = {};
  $scope.data.slides = [];


  $ionicSlideBoxDelegate.update();

  $.post('URL', function(data, status){
    
    var retorno = JSON.parse(data);

    var txt = "";

    $.each(retorno, function(index, value){  

        slideCounter++;
        $scope.data.slides.push( {
            img : "img/boletim.png",
            title : "Slide " + slideCounter,
            data : "Slide " + slideCounter + ' Content'       
        });
        
        $ionicSlideBoxDelegate.update();

    });

  });
  

  setTimeout(function(){
    var atualPagina = 1;
    $(".nPaginas .atual").html(atualPagina);
    var totalPaginas = $($scope.data).size() + 1;
    $(".nPaginas .total").html(totalPaginas);

    $scope.slideHasChanged = function($index) {
      var atualPagina = $index + 1;
      $(".nPaginas .atual").html(atualPagina);
    }
  }, 100);
  
  setTimeout(function(){
    var event = document.createEvent( 'Event' );
    event.initEvent( 'resize', true, true );
    window.dispatchEvent( event );
  }, 1000);
});

<ion-slide ng-repeat="item in data.slides" class="slider-slide">
  <ion-content>
    <div class="imagem">
      <img style="width: 100%; height: 250px;" src="{{item.img}}">
    </div>
    <div class="conteudo">
      <h4>{{item.title}}</h4>
      <p>{{item.data}}</p>
    </div>
  </ion-content>
</ion-slide>