How to insert data dynamically to ion-slide-box Angularjs Ionic

Question

I'm using Ionic framework and Angular js to build a news app !

I'm showing the news on ion-slide-box using ng-repeat here is an example :

<ion-slide-box on-slide-changed="slideHasChanged($index)" show-pager="true" ng-if="items" >
  <ion-slide  ng-repeat="i in items">   
           <h4>{{i.name}}</h4>       
<p>{{i.gender}}</p> 
    <p>{{i.age}}</p>
</div> 
  </ion-slide>
    </ion-slide-box>

I want to insert data dynamically to my ion-slide-box for each slide so I'm using this code :

   $scope.slideHasChanged = function(index) {

          $scope.items.push("{name:'John', age:25, gender:'boy'}");
      }

but this doesn't seem to work right so if you have an idea on how can I reslove this that would be great :)

here is CODEPEN + CODE

jme11 · Accepted Answer · 2018-07-06 02:03:47Z

8

You need to call the update method on $ionicSlideBoxDelegate. (Also, @mark-veenstra is correct, you're pushing a string and not an object).

angular.module('ionicApp', ['ionic'])

.controller('MyCtrl', function($scope, $ionicSlideBoxDelegate) {
  $scope.items=friends;

  $scope.slideHasChanged = function() {
    $scope.items.push({name:'John', age:25, gender:'boy'});
    $ionicSlideBoxDelegate.update();
  };

});

var friends = [
  {name:'John', age:25, gender:'boy'},
  {name:'Jessie', age:30, gender:'girl'},
  {name:'Johanna', age:28, gender:'girl'},
  {name:'Joy', age:15, gender:'girl'},
  {name:'Mary', age:28, gender:'girl'}
];

Also, make sure that you give your slider a height:

.slider {
  height: 200px;
}

edited Jul 6, 2018 at 2:03

answered Jun 16, 2015 at 11:31

jme11

17.9k2 gold badges40 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

atul Over a year ago

Worked for me, i was populating the images using ion-slider, the issue i was facing was, only the last image was showing and the slider was not changing as well. Just placed the $ionicSlideBoxDelegate.update(); method after my $scope.images object and it worked perfectly for me.

Mark Veenstra · Accepted Answer · 2015-06-16 10:28:57Z

1

I'm not completely sure what you are trying to achieve, but if you want this code to work, just change:

$scope.items.push("{name:'John', age:25, gender:'boy'}");

To:

$scope.items.push({name:'John', age:25, gender:'boy'});

answered Jun 16, 2015 at 10:28

Mark Veenstra

4,7496 gold badges38 silver badges68 bronze badges

Collectives™ on Stack Overflow

How to insert data dynamically to ion-slide-box Angularjs Ionic

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related