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