Ion-slide-box not grouping

ionic-v1
1

Is there anything wrong here:

<ion-slide-box auto-play="true" does-continue="true" ng-repeat="entry in allnews.entries">
            <ion-slide>
                <img ng-src="{{entry.articleImage}}">
            </ion-slide>
        </ion-slide-box>

The data contains a bunch of images. My problem is that I do can see the images BUT all of them at the same time, one under the other displayed vertically. I am supposed to see only 1 and then slide through the rest. I’ve tried moving the ng-repeat from the ion-slide-box to the ion-slide hoping it would group them but I don’t see anything, thanks.

2

hello, try (if it’s possible) to show us ur controller plz

3

Here is the controller, thanks a lot sarale.

.controller('MyNewsCtrl', function ($http, $scope, $timeout, $rootScope, $window, $ionicPopover, $ionicSlideBoxDelegate) {

$scope.navSlide = function (index) {
    $ionicSlideBoxDelegate.slide(index, 500);
}

$scope.init = function () {
    $http.get("http://ajax.googleapis.com/ajax/services/feed/load", { params: { "v": "1.0", "q": "http://news.yahoo.com/rss/", "num": "100" } })
        .success(function (data) {
            $scope.allnews = data.responseData.feed;
        })
        .error(function (data) {
            //console.log("ERROR: " + JSON.stringify(data));
        });
};

All news contains the RSS feed json data.

4

$ionicSlideBoxDelegate.update();
just after
$scope.allnews = data.responseData.feed;

5

then your code must be shown like :

.controller(‘MyNewsCtrl’, function ($http, $scope, $timeout, $rootScope, $window, $ionicPopover, $ionicSlideBoxDelegate) {

$scope.navSlide = function (index) {
$ionicSlideBoxDelegate.slide(index, 500);
}

$scope.init = function () {
$http.get(“http://ajax.googleapis.com/ajax/services/feed/load”, { params: { “v”: “1.0”, “q”: “http://news.yahoo.com/rss/”, “num”: “100” } })
.success(function (data) {
$scope.allnews = data.responseData.feed;
$ionicSlideBoxDelegate.update();
})
.error(function (data) {
//console.log("ERROR: " + JSON.stringify(data));
});
};

1 Like
6

is that solved ur problem ?? @sonya123

7

You should put ng repeat in ion-slide instead of ion-slide-box.

2 Likes
8

My apologize for the delay responding @sarale, I got pullet out of the internet :(. I just made the changes you mentioned and it didn’t work, however, I moved the ng-repeat to the ion-slide and worked perfectly. So a combination of your answer and @windht answer did the trick. Thank you both so much.

9

Thanks so much, before I had the ng repeat in the ion-slide and I couldn’t see anything, but now I did it after adding the $ionicSlideBoxDelegate.update(); in the location that @sarale told me and it works, so thank you both :).

1 Like
10

good luck then @sonya123

1 Like