Ionic Collection Repeat - Miss to be populate by websql database

Question

I have some troubles with ionic collection repeat. I can't display a populated list from web sql database. My controller looks like:

 .controller('femmeListCtrl', function($scope) { $scope.dataFemme = []; db.transaction(function(tx) { tx.executeSql('SELECT * FROM datafemme', [], function(tx, results) { for (var i = 0; i < results.rows.length; i++) { $scope.dataFemme[i] = { id: results.rows.item(i).id , 'code_patient': results.rows.item(i).code_patient }; } }); }); }) 

 <div class="list"> <a class="item my-item" collection-repeat="item in dataFemme | filter:filter" collection-item-height="90" collection-item-width="'100%'"> <h2>{{ item.code_patient }}</h2> </a> </div> 

Please, help.

Answer 1

The problem is that Angular doesnt know that the variables have changed. Just add a $timeout at the end of the for loop.

EDITED:

.factory('femmeService', function($q) {
    var femmeService = {};

    femmeService.dataFemme = [];

    femmeService.getAll = function() {
        var deferred = $q.defer();
        db.transaction(function(tx) {
            tx.executeSql('SELECT * FROM datafemme', [], function(tx, results) {
                for (var i = 0; i < results.rows.length; i++) {
                    femmeService.dataFemme[results.rows.item(i).id] = {
                        'id': results.rows.item(i).id,
                        'code_patient': results.rows.item(i).code_patient
                    };
                }
                deferred.resolve();
            });
        });

        return deferred.promise;
    };

    return femmeService;
});

Then in the controller:

femmeService.getAll().then(function() {
    $scope.dataFemme = femmeService.dataFemme;
});

Answer 2

I changed the code like that : I created the new service below

.factory('femmeService', function($timeout) {
var dataFemme = [];
db.transaction(function(tx) {
    tx.executeSql('SELECT * FROM datafemme', [], function(tx, results) {
        for (var i = 0; i < results.rows.length; i++) {
            //dataFemme[results.rows.item(i).id] = {
            dataFemme[i] = {
                id: results.rows.item(i).id
                , 'code_patient': results.rows.item(i).code_patient
            };
        }
        $timeout(function() {
            dataFemme;
        }, 3000);
    });
});
return {
    all: function() {
        return dataFemme;
    },
    get: function(id) {

        return dataFemme[id];
    }
};})

And also changed the controller

.controller('femmeListCtrl', function($scope, femmeService) {
$scope.dataFemme = femmeService.all();})

And I have solved the problem

Answer 3

Thank you @Leandro Zubreski, after using $timeout in the service, the mistake was the index of dataFemme[results.rows.item(i).id] so I used this

dataFemme[i] = {
            id: results.rows.item(i).id
            , 'code_patient': results.rows.item(i).code_patient
        };

and everything gone right.