As a newcomer to AngularJS, I am encountering numerous challenges in solving some minor issues. One specific problem I am facing is that when my view refreshes, the configuration settings are lost. To elaborate further, I have a tab at the top of the view with labels and textboxes below it. However, when my code saves certain configurations from SQLite, Ionic seems to forget the tab and the objects underneath become hidden by the tab.
Below is the code used to call SQLite:
Controller:
.controller('ClienteDetalheCtrl', ['clientesFactory', '$scope', '$state', '$window', '$rootScope', function (clientesFactory, $scope, $state, $window, $rootScope) {
buscaEquipamento();
alteraData();
function buscaEquipamento() {
clientesFactory.selectTodos('equipamento');
$scope.selecionaInstalacao = clienteselec;
}
}
SQLite call:
var db = null;
var clienteselec = [];
angular.module('sqlite', ['ionic', 'ngCordova'])
.run(function ($ionicPlatform, $cordovaSQLite) {
$ionicPlatform.ready(function () {
db = $cordovaSQLite.openDB({ name: "rollers.db", location: 1 });
$cordovaSQLite.execute(db, "CREATE TABLE IF NOT EXISTS clientes (id integer primary key, nome varchar(40), TC int)");
$cordovaSQLite.execute(db, "CREATE TABLE IF NOT EXISTS instalacao (id integer primary key, idCliente int, dataInst datetime)");
$cordovaSQLite.execute(db, "CREATE TABLE IF NOT EXISTS manutencao (id integer primary key, idCliente int, idInstalacao int, dataManut datetime)");
$cordovaSQLite.execute(db, "CREATE TABLE IF NOT EXISTS equipamento (id integer primary key, idCliente int, idInstalacao int, idManutencao int, TC int, posicao varcar(1), Rolo varchar(40), dataEquip datetime)");
});
})
.factory('clientesFactory', function ($ionicPlatform, $cordovaSQLite) {
selectTodos: function (tab) {
var query = "SELECT * FROM " + tab;
clienteselec = [];
$cordovaSQLite.execute(db, query, []).then(function (result) {
if (result.rows.length) {
for (var i = 0; i < result.rows.length; i++) {
clienteselec.push(result.rows.item(i));
}
} else {
console.log("no data found!");
}
}, function (err) {
console.log("error" + err);
});
},
});
The view where the information will be displayed:
<ion-header>
<ion-navbar>
<ion-title>Instalacao</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<label class="item item-input">
<span class="input-label">Cliente:</span>
<input type="text" id="TxtCli" disabled />
</label>
<label class="item item-input">
<span class="input-label">TC</span>
<input type="text" id="TxtTC"/>
</label>
<label class="item item-input">
<span class="input-label">Data:</span>
<input type="text" id="TxtData" disabled />
</label>
<label class="item item-input">
<span class="input-label">Hora:</span>
<input type="text" id="TxtHora" disabled />
</label>
<div ng-controller="ClienteDetalheCtrl">
<ion-item ng-repeat="inst in selecionaInstalacao">
{{inst.TC}}, {{inst.posicao}}, {{inst.Rolo}}, {{inst.dataEquip}}
</ion-item>
<ion-item ng-show="!selecionaInstalacao.length">No events</ion-item>
</div>
<button ng-click="alteraInstalacao()">Altera</button>
</ion-content>
I am urgently seeking a solution to ensure that the page refresh functions correctly as I need to populate the grid below the textboxes. Any assistance would be greatly appreciated. Thank you.