使用Ionic,SQLite返回多个数据

时间:2015-02-02 20:47:43

标签: android database angularjs sqlite ionic

我试图用离子框架中的sqlite来检索一些数据。但我是新手,所以我需要你的帮助。

我想从db以sqlite作为列表检索数据,所有数据。

如果// console.log line命令打开,我只获得一个数据,而不是其他数据。 如果app.js是这样的,我会收到此错误。

TypeError: Cannot read property 'push' of undefined
    at app.js:65
    at processQueue (ionic.bundle.js:20962)
    at ionic.bundle.js:20978
    at Scope.$get.Scope.$eval (ionic.bundle.js:22178)
    at Scope.$get.Scope.$digest (ionic.bundle.js:21994)
    at Scope.scopePrototype.$digest (hint.js:1468)
    at ionic.bundle.js:22216
    at completeOutstandingRequest (ionic.bundle.js:12714)
    at ionic.bundle.js:13094

app.js

var db = null;
var example = angular.module('starter', ['ionic', 'ngCordova'])

.run(function($ionicPlatform, $cordovaSQLite) {
    $ionicPlatform.ready(function() {
        if(window.cordova && window.cordova.plugins.Keyboard) {
            cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
        }
        if(window.StatusBar) {
            StatusBar.styleDefault();
        }
        if (window.cordova) {
          db = $cordovaSQLite.openDB({ name: "my.db" }); //device
        }else{
          db = window.openDatabase("my.db", '1', 'my', 1024 * 1024 * 100); // browser
        }

        $cordovaSQLite.execute(db, "CREATE TABLE IF NOT EXISTS people (id integer primary key, firstname text, lastname text)");
    });
});

example.controller("ExampleController", function($scope, $cordovaSQLite) {

    $scope.insert = function(firstname, lastname) {
        var query = "INSERT INTO people (firstname, lastname) VALUES (?,?)";

        $cordovaSQLite.execute(db, query, [firstname, lastname]).then(function(result) {
            console.log("INSERT ID -> " + result.insertId);
        }, function (error) {
            console.error(error);
        });
    }

    $scope.select = function(lastname) {
        var query = "SELECT firstname, lastname FROM people WHERE lastname = ?";
        $cordovaSQLite.execute(db, query, [lastname]).then(function(result) {
            if(result.rows.length > 0) {
                console.log("SELECTED -> " + result.rows.item(0).firstname + " " + result.rows.item(0).lastname);
            } else {
                console.log("No results found");
            }
        }, function (error) {
            console.error(error);
        });
    }

    $scope.selectAll = function() {
        var query = "SELECT firstname, lastname FROM people";
        var outputs = [];
        $cordovaSQLite.execute(db, query, []).then(function(result) {
            if(result.rows.length > 0) {
                for(var i = 0; i < result.rows.length; i++) {
                    //console.log("SELECTED -> " + result.rows.item(i).firstname + " " + result.rows.item(i).lastname);
                    /* $scope.outputs = [
                       {"firstname": result.rows.item(i).firstname}
                    ]; */

                    $scope.outputs.push({
                        "firstname" : result.rows.item(i).firstname,
                    });
                }
            } else {
                console.log("No results found");
            }
        }, function (error) {
            console.error(error);
        });
    }

});

example.controller("PeopleCtrl", function($scope) {
    $scope.people = [
        {firstName: 'John', lastName: 'Doe', address: {city: 'Chandler', state: 'AZ', zip: 85248}},
        {firstName: 'Jane', lastName: 'Doe', address: {city: 'Chandler', state: 'AZ', zip: 85248}},
        {firstName: 'Johnny', lastName: 'Doe', address: {city: 'Phoenix', state: 'AZ', zip: 85003}}
    ];
});

和index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
        <title></title>
        <link href="lib/ionic/css/ionic.css" rel="stylesheet">
        <link href="css/style.css" rel="stylesheet">
        <script src="lib/ionic/js/ionic.bundle.js"></script>
        <script src="js/ng-cordova.min.js"></script>
        <script src="cordova.js"></script>
        <script src="js/app.js"></script>
    </head>
    <body ng-app="starter">

    <ion-pane>
      <ion-header-bar class="bar-stable">
        <h1 class="title">Ionic Blank Starter</h1>
      </ion-header-bar>
      <ion-content>

          <div ng-controller="ExampleController">
             <button class="button" ng-click="insert('Arzu','Acar')">Insert</button>
             <button class="button" ng-click="selectAll()">Select</button>

             <ul>
                <li ng-repeat="output in outputs">
                    <span class="bold">{{output.firstname}}</span>
                </li>
            </ul>
         </div>

            <div ng-controller="PeopleCtrl">        
                <div id="peopleContainer">
                    People:<br /><br />
                    <ul>
                        <li ng-repeat="person in people">
                            <span class="bold">{{person.firstName}} {{person.lastName}}</span>
                            <br />
                            {{person.address.city}}, {{person.address.state}}&nbsp;&nbsp;{{person.address.zip}}
                        </li>
                    </ul>
                </div>
            </div>
        </ion-content>
    </ion-pane>
  </body>
</html>

谢谢。

2 个答案:

答案 0 :(得分:1)

在ExampleController中:selectAll,您有以下声明:

var outputs = [];

然后推送到$ scope:

上不存在的数组
 $scope.outputs.push({
   "firstname" : result.rows.item(i).firstname,
 });

我认为你打算每次调用selectAll时初始化$ scope.outputs数组:

$scope.outputs = [];

答案 1 :(得分:0)

您必须在控制器的主要范围内声明:

After

您的“selectAll”功能应如下所示:

$scope.outputs = [];

希望这有效! :)