Menu
<ion-slide-box>
<ion-slide ng-repeat="imageUrl in item.images">
<img ng-src="{{imageUrl}}" />
</ion-slide>
</ion-slide-box>
and my Controller:
$scope.changeItem = function(differentItem) {
$scope.item = differentItem;
//$scope.$apply();
$ionicSlideBoxDelegate.update();
};
Whenever the changeItem() button is clicked, it changes $scope.item which i use in ng-repeat(in slide-box).
My problem here is that $ionicSlideBoxDelegate.update(); doesn't update and set the pager index to 0 with the new number of images of the selected item even though the $scope.item changes.
660
asked Jan 27 '26 05:01
edit: Indeed, this seems like a known issue, as noted on the official Ionic forum. However, I made the example work as you can see here. Things I've changed are the following:
$ionicSlideBoxDelegate.slide(0); because it otherwise fails again if you click the button when on the last image$ionicSlideBoxDelegate.update() as you were trying, but inside the $timeout since (as you will read on forum) it could be that the items are not yet rendered when you call the update() method on $ionicSlideBoxDelegate;Updated code, here for reference:
angular.module('ionicApp', ['ionic'])
.controller('MyCtrl', function($scope, $http, $ionicSlideBoxDelegate, $timeout) {
$scope.item = {};
$scope.item.images = [
'http://lorempixel.com/400/200/',
'http://lorempixel.com/400/300/',
'http://lorempixel.com/400/400/',
];
$scope.changeImages = function(){
$ionicSlideBoxDelegate.slide(0);
$scope.item.images = [
'http://lorempixel.com/200/200/',
'http://lorempixel.com/300/300/'
];
$timeout(function(){
$ionicSlideBoxDelegate.update();
}, 500);
};
});<html ng-app="ionicApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Ionic Template</title>
<link href="http://code.ionicframework.com/1.0.1/css/ionic.min.css" rel="stylesheet">
<script src="http://code.ionicframework.com/1.0.1/js/ionic.bundle.min.js"></script>
</head>
<body ng-controller="MyCtrl">
<ion-slide-box show-pager="true">
<ion-slide ng-repeat="imageUrl in item.images track by $index">
<img ng-src="{{imageUrl}}" />
<button class="button" ng-click="changeImages()">change imgs</button>
</ion-slide>
</ion-slide-box>
</body>
</html>--edit end--
I made a test project on CodePen, and as you can see, changing the images on the item object updates accordingly.
So, without seeing the rest of your code, we can't help. You can make a similar CodePen example with your code, so that we can see immediately what may be wrong with it.
Code pasted here for reference:
angular.module('ionicApp', ['ionic'])
.controller('MyCtrl', function($scope, $http) {
$scope.item = {};
$scope.item.images = [
'http://lorempixel.com/400/200/',
'http://lorempixel.com/400/300/',
'http://lorempixel.com/400/400/',
];
$scope.changeImages = function(){
$scope.item.images = [
'http://lorempixel.com/200/200/',
'http://lorempixel.com/300/300/',
'http://lorempixel.com/500/400/',
];
};
});body {
cursor: url('http://ionicframework.com/img/finger.png'), auto;
}<html ng-app="ionicApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Ionic Template</title>
<link href="http://code.ionicframework.com/0.9.25/css/ionic.min.css" rel="stylesheet">
<script src="http://code.ionicframework.com/0.9.25/js/ionic.bundle.min.js"></script>
</head>
<body ng-controller="MyCtrl">
<ion-header-bar title="myTitle"></ion-header-bar>
<ion-pane class="has-header" padding="true">
<h2>You can't see me</h2>
</ion-pane>
</body>
</html>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
