Displaying data based on slide index


#1

Hey Guys,

Have a question - I’m sure it’s simple, but having a hard time finding a “right” solution.
I’m new to angular / ionic and JavaScript isn’t my strength…

In my app (company directory), I use the Slide Box feature that is included in Ionic.
My slides are: Home Page (0), Department Listing (1), Alphabetical Listing (2).

My app on first load uses $http to download the JSON employee directory, then saves it to localStorage (for offline use). It then loads up the Home Page (slide 0).

I use the on-slide-changed="slideChanged(index)" to grab the index value:

$scope.slideChanged = function(index) {    
    if(index == 1) {
        // Sort Array By Department & Insert Titles, Send Data To Collection-Repeat
    }

    if(index == 2) {
        // Sort Array Alphabetically & Insert Titles, Send Data To Collection-Repeat
    }
};

This worked great at first because I had a “Home Page” that acted as a landing page and when I navigated to the next slide it pulled the data and rendered it perfectly.

The CEO of the company decided to remove the “Home Page” and have the application start on the Alphabetical Listing. I’ve done what he asked and removed the homepage, switched the Alphabetical Listing to the first slide but on load, the data is not rendered.

This makes sense because my data is being drawn on the Slide Changed Event, and that event is not being called until I scroll or click a button. I’ve tried using the active-slide feature but haven’t been able to get that to work either.

My code attempt was something like this:

<ion-slide-box active-slide="myActiveSlide"> … </ion-slide-box>

if($scope.myActiveSlide == 0) { 
    // Sort Array Alphabetically & Insert Titles, Send Data To Collection-Repeat
}

I can add: $scope.myActiveSlide = 0; to the top, but that only renders my first slide, leaving my second slide blank.

Is there something different I can do here?

Thanks!

LSI


#2

Can’t you use ng-repeat and loop through the JSON to render each slide? Thats how I do exactly the same thing. For example I’m using this with wordpress to output articles within the ion-slide-box (I have custom templates for each one so use ng-include for each one).

<ion-slide-box selected="activeSlide" on-slide-changed="onSlideChanged(index)" ng-class="$root.cls" show-pager="true" prevent-drag>
          <ion-slide ng-repeat="post in posts">
            <ng-include src="'post-' + post.name + '.html'"></ng-include>
          </ion-slide>
          <ion-slide-pager></ion-slide-pager>
        </ion-slide-box>