Looking to programmatically load in data for many SlideBoxes

ionic-v1
1

I am liking the concept of Ionic SlideBox(es) and want to push it a little deeper. In nosing around the console, I see that $ionicSlideBoxDelegate._instances exposes what look like methods for a load: function () and similar setup: function (). These both show set/get functions, but its beyond me to know how to take advantage of these functions.

I may have 30-100 “pages” that vary every day, so I want to programmatically load the different data as ion-slide pages.

My question is then, what is the exact syntax for loading a set of ion-slide pages. please show an example. Thanks.

2

You don’t specifically need IonicSlideBoxDelegate to load in content in a slidebox dynamically. You can just load in ion-slides by using an ng-repeat. So:

  <ion-slide-box auto-play="true" does-continue="true">
    <ion-slide ng-repeat="slide in slides">
      <div class="box">
        <span>{{slide.title}}</span>
      </div>
    </ion-slide>

Then in your controller make sure you define $scope.slides with your data.

You can find documentation on IonicSlideBoxDelegate and all other functions and elements at http://ionicframework.com/docs/api/.

3

Yes I was well aware of that “ng-repeat” style, which is great for cases where every page presents exactly the same kinds of data. Thats not what I need here. Each page will be slightly different, I need to code the contents rather than loop.

The documentation I found on IonicSlideBoxDelegate is very sparse with NO examples of syntax or best practices.

I already had that information, now looking for detailed documentation and examples on using the load or setup functions to build lots of different pages with code.

4

IonicSlideBoxDelegate only does a couple of things, and I’m not sure it does what you think it does.

It allows you to move to a certain slide, to start, to stop, and to update the slidebox, if for some reason the $scope variable with your data isn’t ready on compile of the page. All these methods are described in the documentation.

I’m also not quite sure what you mean with that the ng-repeat means that your data is always the same across pages. It certainly doesn’t have to be.

There are pages, and there are slides in a slidebox. If you want to have multiple pages with different instances of slideboxes, just load in different data in your scope variable depending on what page you’re loading.

So for instance:

.controller('Page1Ctrl', function($scope, $rootScope, $stateParams, DataHandler) {
  $scope.slides = DataHandler.GetSlidesForPage(1);
}

.controller('Page2Ctrl', function($scope, $rootScope, $stateParams, DataHandler) {
  $scope.slides = DataHandler.GetSlidesForPage(2);
}

Etc.

If you want your slides to be different, that’s just a matter of loading in the right data in your $scope variable, and showing/hiding parts of your data depending on variables.

5

You can even have more than one slidebox on one page, both with different data. Like this:

.controller('Page1Ctrl', function($scope, $rootScope, $stateParams, DataHandler) {
  $scope.slides1 = DataHandler.GetSlidesForPage(1);
  $scope.slides2 = DataHandler.GetSlidesForPage(2);
}

and then have this in your view:

<ion-slide-box auto-play="true" does-continue="true">
    <ion-slide ng-repeat="slide in slides1">
      <div class="box">
        <span>{{slide.title}}</span>
      </div>
    </ion-slide>

<ion-slide-box auto-play="true" does-continue="true">
    <ion-slide ng-repeat="slide in slides2">
      <div class="box">
        <span>{{slide.title}}</span>
      </div>
    </ion-slide>
6

Well thanks for your thoughts on this, much appreciated.

Consider that ESPN has tasked you with building a slide box for each day to represent their sports calendar. Each day will have a wide range of different sports and games, not lending itself to a simple ng-repeat. Each day is different.

What may work best is going this suggested way:

That looks like DataHandler is a Factory and GetSlidesForPage is a return method, if I read that right? Thats likely the solution. Thanks for that good idea.

7

Yup, I’m using a factory where I can loop through data and construct objects that have the data I need in that particular view.

Glad this helped a bit. Good luck!

8

I encountered a design that needed multiple sliding “pages” of a somewhat complex set of date based data, each date on its own page.

I found that with creative JSON / Data management and using the “ng-repeat” method within an ion-slide control, I could get a quite sophisticated card swipe, with each card auto-populated with a full page of various data as they slide along. Like in:

<ion-slide ng-repeat="item in DataArray">

I started with a JSON “item” which setup first with some single values that are easily expressed in the ion-slide, like:
{{ item.ForDate| date }}
{{ item.ForWeek }}

Next the JSON data “item” was loaded with 2 different data arrays, one for my “Active” data and one for my “Completed” data. This data varies a lot for each day. Now the “item” is done and added to the DataArray as a “pageful” of data, something like:

 function loadDateData() {
    SlideIdx++;
    DataArray[SlideIdx] = {
      "ForDate": last_Date,
      "ForWeek": last_Week,
      "ActiveData": Active,       //(an array)
      "CompletedData": Completed  //(an array)
    };
  };

Now, this code will elegantly present as sliding pages, one per date, whatever data lives in DataArray, like:

<ion-slide ng-repeat="item in DataArray"> 
    {{ item.ForDate| date }}
    {{ item.ForWeek }}
    
<div ng-repeat="Active in item.ActiveData">
(for data that repeats within a row/col grid)

<tbody ng-repeat="Completed in item.CompletedData">
(for data that repeats within a table)

This solution made a high level presentation of the daily item pages with minimal coding. Once you know you can repeat items and that data within the items can also repeat, you can get a lot done.

Nice work Ionics, Angulars, et al.

9

I tried the above, but seem that I failed in something.
Here’s a screenshot:

https://www.dropbox.com/s/4hfr0wcnnky8w9o/Screenshot%202014-07-01%2007.12.26.png

My code is:

<ion-view title="Dashboard">
  <ion-content class="has-header padding">
      <ion-slide-box>
          <ion-slide ng-repeat="question in questions">
              <span>{{question.question}}</span>
          </ion-slide>
      </ion-slide-box>
  </ion-content>
</ion-view>

Any advice is welcome.