mercredi 3 juin 2015

Ionic Framework -SQLite (the function of data for DB SQLite Make a Modal)

have the example TodoApp + Ionic + SQLite installed, which also works very well. Real good tutorial -> http://ift.tt/1vPZNlU

Now I have tried under the first view Categories add data already in the DB which has also worked well.

Now I wanted instead of ( $scope.insert = function ... $ionicPopup.prompt ).

Several data on a modal ( $scope.insert = function ... $ionicModal.fromTemplateUrl('templates/modal_categories.html' ) for DB SQLite Add.

Ionic and angularjs still very new to me, even after research and try unfortunately no solution found. Since I do not know where and how the function of data for DB SQLite Make a Modal.

either at the point where ( $scope.insert = function ... $ionicPopup.prompt )

oder Modal ( };$scope.contact = { ... $scope.openModal = function() {$scope.modal.show(); )

Here is my code CategoriesController.js (Categories, Insert, Modal) :

Categories:

   var app = angular.module('categoriecontroller', ['ionic']);

app.controller('CategoriesController', function($scope, $ionicPlatform, $ionicPopup, $cordovaSQLite, $stateParams, $ionicModal) {

    $scope.categories = [];

    $ionicPlatform.ready(function() {

        var query = "SELECT id, category_firstname, category_lastname, category_date FROM tblCategories";

        $cordovaSQLite.execute(db, query, []).then(function(res) {

            if (res.rows.length > 0) {

                for (var i = 0; i < res.rows.length; i++) {

                    $scope.categories.push({
                        id : res.rows.item(i).id,
                        category_firstname : res.rows.item(i).category_firstname,
                        category_lastname : res.rows.item(i).category_lastname,
                        category_date : res.rows.item(i).category_date

                    });

                }

            }

        }, function(error) {

            console.error(error);

        });

    });

Insert:

    $scope.insert = function(category_firstname, category_lastname, category_date) {



        $ionicPopup.prompt({

            title : 'Enter a new TODO list',
            inputType : 'text'



        }).then(function(result) {

            if (result !== undefined) {

                var query = "INSERT INTO tblCategories (category_firstname, category_lastname, category_date) VALUES (?,?,?)";

                $cordovaSQLite.execute(db, query, [category_firstname, category_lastname, category_date]).then(function(res) {

                    $scope.lists.push({
                        id : res.insertId,
                        category_firstname, 
                        category_lastname, 
                        category_date : result
                    });

                }, function(error) {

                    console.error(error);

                });

            } else {

                console.log("Action not completed");

            }

        });

    }

    $scope.delete = function(item) {

        var query = "DELETE FROM FROM tblTodoListItems where todo_list_id = ?";
        var outerquery = "DELETE FROM tblTodoLists where id = ?";
        var innerquery = "DELETE FROM tblCategories where id = ?"

        $cordovaSQLite.execute(db, query, [item.id]).then(function(res) {

            $cordovaSQLite.execute(db, outerquery, [item.id]).then(function(res) {

                $cordovaSQLite.execute(db, innerquery, [item.id]).then(function(res) {

                    $scope.categories.splice($scope.categories.indexOf(item), 1);

                });

            }, function(error) {

                console.error(error);

            });

        });

    }
});

Modal:

    app.controller('Categories_Ctrl_Modal', function($scope, $ionicModal) {

    $scope.contact = {

        category_firstname : '',
        category_lastname : '',
        category_date : ''
    }

    $ionicModal.fromTemplateUrl('templates/modal_categories.html', {

        scope : $scope,
        animation : 'slide-in-up'

    }).then(function(modal) {
        $scope.modal = modal;
    });

    $scope.openModal = function() {
        $scope.modal.show();
    };

    $scope.closeModal = function() {
        $scope.modal.hide();
    };

    $scope.$on('$destroy', function() {
        $scope.modal.remove();
    });

    $scope.$on('modal.hidden', function() {

    });

    $scope.$on('modal.removed', function() {


    });

});

Here is my categories.html:

    <ion-view title="Categories">

    <ion-nav-bar>
        <ion-nav-back-button class="button-clear">
            <a class="button icon-left ion-chevron-left button-clear button-dark">Back</a>
        </ion-nav-back-button>
    </ion-nav-bar>

    <ion-nav-buttons side="right">
        <button class="right button button-icon icon ion-plus" ng-controller='Categories_Ctrl_Modal' ng-click="templates/openModal()" ></button>
    </ion-nav-buttons>

    <ion-content>

        <ion-content>

            <ion-list>

                <ion-list show-delete="false" can-swipe="true">

                    <ion-item ng-repeat="category in categories" href="#/lists/{{category.id}}">

                        <h2>{{category.id}}</h2>

                        <p> {{category.category_firstname}} </br> {{category.category_lastname}} </br> {{category.category_date}} </p>

                        <ion-option-button class="button-assertive icon ion-trash-a" ng-click="delete(category)"></ion-option-button>

                    </ion-item>

                </ion-list>

        </ion-content>

</ion-view>

Here is my modal_categories.html:

   <ion-modal-view>

    <ion-header-bar>

        <h1 class="title">Categories Data Insert</h1>

        <div class="buttons">
            <button class="button button-clear" ng-click="closeModal()">
                Close
            </button>
        </div>

    </ion-header-bar>

    <ion-content>

        <div class="list">

            <label class="item item-input"> <span class="input-label">Firstname</span>
                <input type="text" placeholder="Type here" ng-model="contact.category_firstname">
            </label>

            <label class="item item-input"> <span class="input-label">Lastname</span>
                <input type="text" placeholder="Type here" ng-model="contact.category_lastname">
            </label>

            <label class="item item-input"> <span class="input-label">Date</span>
                <input type="date" placeholder="Type here" ng-model="contact.category_date">
            </label>

        </div>

        <button class="button button-full button-positive" ng-click="[insert(), closeModal()]"></button>

    </ion-content>

</ion-modal-view>

Thank you in advance

Aucun commentaire:

Enregistrer un commentaire