Adding ionic slide dynamically from DB

Question

I am currently trying ionic. I am not really used to this kind of web dev so I might be totally off-track. Anyway, I want to access an SQLite DB and add the results to a ion-slide-box.

I was trying something like that :

function selectResultSuccess(tx, results) 
{
 var div = "";
 div += "<ion-slide-box >";
 for (var i = 0 ; i < len ; i++)
   {
     div+="<ion-slide>"
     div+= results.rows.item(i).Result ;
     div+="</ion-slide>"
   }
 div += "</ion-slide-box >";
 $(".result-list").html(div);
}

HTML :

<ion-content ng-controller="ExampleController" class="result-list">
</ion-content>

app.js :

 angModule.controller("ExampleController", function($scope,     $ionicSlideBoxDelegate) {
$scope.navSlide = function(index) {
    $ionicSlideBoxDelegate.slide(index, 500);
}
$scope.nextSlide = function() {
    $ionicSlideBoxDelegate.next(500);
}
$scope.update = function() {
    $ionicSlideBoxDelegate.update();
}
});

So this does not work, the slidebox does not get updated and I got all my results on the same page (instead of having them on different slides), I have tried multiple things and I believe this is not the best way to handle that but I can't find anything that matches my needs.

I am also trying to avoid working with SQLite plugins.

Brandy Smith · Accepted Answer · 2015-07-12 17:36:39Z

1

So, you're going at it completely wrong, but that's ok. You're making the beginner mistake of still being in the JQuery mindset instead of the Angular mindset. Everyone goes through it.

So, Angular is based on templates, not DOM manipulation (with the exception of directives). What you want to do is build a template that does an ng-repeat on a set of slides, stored in some kind of scope variable.

Let's start with this:

<ion-content ng-controller="ExampleController" class="result-list">
    <ion-slide-box></ion-slide-box>
</ion-content>

In our controller, lets take those results and put them in a scope variable. I'm going to do some "theoretical" code here as I don't have a context as to what you are doing above.

angModule.controller("ExampleController", function($scope, $ionicSlideBoxDelegate) {
     $scope.results = results;
 });

Once we have the results in the scope, let's do an ng-repeat on the results.

<ion-content ng-controller="ExampleController" class="result-list">
    <ion-slide-box>
        <ion-slide ng-repeat="result in results">{{result}}</ion-slide>
    </ion-slide-box>
</ion-content>

Again, this isn't complete code, more pointing you in the right direction.

I would suggest starting with some basics and fundamentals.

Suggest starting with these articles:

http://mcgivery.com/structure-of-an-ionic-app/

http://mcgivery.com/creating-views-with-ionic/

http://mcgivery.com/controllers-ionicangular/

And if you want even more learning resources:

http://mcgivery.com/100-ionic-framework-resources/

edited Jul 12, 2015 at 17:36

Brandy Smith

1,18610 silver badges21 bronze badges

answered Jul 10, 2015 at 14:34

Andrew McGivery

1,4008 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

batmat Over a year ago

I am starting to understand the Angular-way-of-life, but how do you "link" the results I got from my DB to the rest of the Angular stuff ?

Andrew McGivery Over a year ago

Depends on what implementation of SQLite you are using, but this may help: gist.github.com/jgoux/10738978 Generally, you'll probably want to do the database calls in a factory and have it return a promise and handle that promise from your controller.

Collectives™ on Stack Overflow

Adding ionic slide dynamically from DB

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related