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

Posted 2023-03-07

【中文标题】在 AngularJs 中从数据库中获取和显示数据

【英文标题】：Fetch and display data from database in AngularJs

【发布时间】：2015-02-25 12:53:24

【问题描述】：

如何在屏幕上弹出我的客户列表，该列表来自我的数据库，我有 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

【参考方案1】：

我已经设法使用 deferred 和 promise 解决了这个问题，这就是我所做的：

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>

现在我可以看到我的所有客户的列表视图。

【参考方案2】：

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


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

    );

【讨论】：

在 html 中使用 ng-repeat

感谢您的帮助，我是这样做的：<ion-item ng-repeat="itens in items " > <p>itens</p> </ion-item> 但我什么也没显示

我的控制器设置在路由中

我理解你的问题......那是返回一个承诺......你必须在控制器内解决这个承诺......

我在回答中发帖