从AngularJs中的数据库中获取和显示数据

时间:2015-02-25 12:53:25

标签: javascript angularjs cordova phonegap-plugins ionic-framework

如何在屏幕上弹出我的客户列表,列表来自我的数据库,我有11行客户端,我想创建列表视图并显示它们,这是我的代码:

dbFactory.method = function findAll() {
    db.transaction(
        function(tx) {
            var sql = "SELECT (nome) as nomes FROM clientes";
            log(sql);
            tx.executeSql(sql, [],
                function(tx, results) {
                    var len = results.rows.length,
                        clientes = [],
                        i = 0;
                    for (; i < len; i = i + 1) {
                        clientes[i] = results.rows.item(i).nomes;
                    }
                    log(clientes + '  found');


                }
            );
        },txErrorHandler,
        function () {

        }
    );

};

控制器:

 .controller('ListaCtrl', function ($scope, dbFactory) {


         $scope.items = dbFactory.method();
         console.log(dbFactory.method());


    });

clientes.html:

<ion-view view-title="Playlists" ng-app="starter">
  <ion-content>
    <ion-list>
  <ion-item ng-repeat="itens in items" >

      <p>{{itens.nome}}</p>

  </ion-item>
    </ion-list>
  </ion-content>
</ion-view>

日志:

 Promise {$$state: Object, then: function, catch: function, finally: function}
$$state: Object
status: 1
value: SQLResultSet
insertId: [Exception: DOMException: Failed to read the 'insertId' property from 'SQLResultSet': The query didn't result in any rows being added.]
rows: SQLResultSetRowList
length: 11
__proto__: SQLResultSetRowList
rowsAffected: 0

2 个答案:

答案 0 :(得分:2)

我设法使用延期和承诺来解决这个问题,这就是我所做的:

var getMessages = function findAll() {
            db.transaction(
                function(tx) {
                    var sql = "SELECT (nome) as nomes FROM clientes";
                    tx.executeSql(sql, [],
                        function(tx, results) {
                            var len = results.rows.length,
                                clientes = [],
                                i = 0;
                            for (; i < len; i = i + 1) {
                                clientes[i] = results.rows.item(i).nomes;
                            }
                            log(clientes + ' rowsss found');
                            deferred.resolve(clientes);

                        }
                    );
                },txErrorHandler,
                function () { }
            );
            return deferred.promise;

        };

        return {
            showClientes: getMessages
        };

控制器:

.controller('ListaCtrl', function ($scope, dbFactory) {

        dbFactory.showClientes().then(function(listview) {
            $scope.clientes = listview;
            console.log($scope.clientes);
        });

    });

和html:

<ion-view view-title="Playlists" ng-app="starter">
  <ion-content>
    <ion-list>
      <ion-item ng-repeat="cliente in clientes">

          {{cliente}}

      </ion-item>
    </ion-list>

  </ion-content>
</ion-view>

现在,我可以与所有客户一起查看我的列表视图。

答案 1 :(得分:1)

 .controller('ListaCtrl', function ($scope, dbFactory) {


        dbFactory.method().$promise.then(
                 function(res){
                       $scope.items = res; //or res.data
                 },
                 function(){
                      //error call back
                 }
         );

    });