heyred heyred - 5 months ago 32
AngularJS Question

Boolean values not being registered on AngularJS and SQLite

I have a cross platform application developed in AngularJS, Monaca and Onsen UI.

I am trying to implement a SQLite local database in my project for storing information. The information should persists when the phone is switched off, app is closed etc.

On a view I ask a user to enter some value. That value is then checked against the SQLite local database and if a match is found, the user gets the success message. If no match is found, the user gets the fail message.

I have the view completed and I am registering user inputs. I also have the SQLite database implemented and I have it pre-populated with some values for testing.

In my view I have a ng-if that checks if a match is found and in my controller I have a Boolean value that returns true/false based on if a match is found in the SQLite local database.

In my view however, the ng-if always displays the initialised Boolean value of the controller (false in this case) until the user interacts with any element on the page.

In my view.html I setup my ng-if as follows

<div ng-if="success">
<p>Success!</p>
</div>

<div ng-if="!success">
<p>Fail!</p>
</div>


Then in my app.js controller I initialise the success boolean, and check my database for the user entered value as below

$scope.success = false;

// Initialising Database variable
var db;
document.addEventListener("deviceready", onDeviceReady, false);

function onDeviceReady() {
db = window.openDatabase("myDB", "1.0", "MyDB", 200000);
db.transaction(createDB, errorCB, successCB);
db.transaction(queryDB, errorCB, successCB);
}

function createDB(tx) {
tx.executeSql('DROP TABLE IF EXISTS values');
tx.executeSql('CREATE TABLE IF NOT EXISTS values (id INTEGER PRIMARY KEY, name)');
tx.executeSql('INSERT INTO values (id, name) VALUES (1, "Lorem Ipsum")');
}

function queryDB(tx) {
tx.executeSql('SELECT * FROM values', [], querySuccess, errorCB);
}

function querySuccess(tx, results) {
var len = results.rows.length;

// There are records in the Database
if (len != 0)
{
// Checking user value against DB records happen here - ommited becasue not relevant - working and returns true here
$scope.success = true; // This should set my view.html ng-if to true
}
// There are NO records in the Database
else
{
$scope.success = false;
}
}


The view.html always displays Fail! even though a console.log() shows that the value in the controller is set to true. The thing is also that there is a small information button on the page that simply displays a modal with some info to the user. As soon as I press that, the success boolean is set to true - even though there are no triggers on the information button.

Can anyone please explain why this is happening? What am I doing wrong?

Answer

You need to add it to digest cycle, $timeout can be used like

$timeout(function(){
    $scope.success = false;
}, 1)