How to dynamically insert data into an Angularjs Ionic ion slider

Question

I use the Ionic framework and Angular js to create a news app!

I am showing news on an ion slide 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 dynamically insert data into my ion slider for each slide, so I use this code:

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

but this doesn't seem to work correctly, so if you have an idea on how I can change this, it would be great :)

here is CODEPEN + CODE

Answer 1

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

Updated CodePen

 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 you point your slider to the height:

 .slider { height: 200px; } 

Answer 2

I'm not quite 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'});