CODEWITHSUNDEEP
javascriptsqlitecordovaionic-framework
batmat
batmat

Reputation: 225

Adding ionic slide dynamically from DB

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.

Upvotes: 0

Views: 1141

Answers (1)

Andrew McGivery
Andrew McGivery

Reputation: 1390

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/

Upvotes: 1

Related Questions