在离子项目中显示数据库搜索结果

时间:2016-04-13 02:49:11

标签: javascript angularjs sqlite ionic-framework

我已经创建了一个示例离子项目,以便使用离子项目来试验sqlite数据库连接。但问题是搜索结果只能通过控制台视图查看。我试图通过网络搜索,一种在h1标签之间的html页面体内显示输出的方法

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);

    
      cordova.plugins.Keyboard.disableScroll(true);
    }
    if(window.StatusBar) {
      StatusBar.styleDefault();
    }
    db = $cordovaSQLite.openDB("my.db");
    $cordovaSQLite.excecute(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(res) {
            console.log("INSERT ID -> " + res.insertId);
        }, function (err) {
            console.error(err);
        });
    }
 
    $scope.select = function(lastname) {
        var query = "SELECT firstname, lastname FROM people WHERE lastname = ?";
        $cordovaSQLite.execute(db, query, [lastname]).then(function(res) {
            if(res.rows.length > 0) {
                console.log("SELECTED -> " + res.rows.item(0).firstname + " " + res.rows.item(0).lastname);
            
            } else {
                console.log("No results found");
            }
           
        }, function (err) {
            console.error(err);
        });
    }
 
});

<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 ng-controller="ExampleController">
          <button class="button" ng-click="insert('NIC','Dgboy')">Insert</button>
          <button class="button" ng-click="select('Dgboy')">Select</button>
          //i want to dislplay firstname and last name when Select button is clicked
      </ion-content>
    </ion-pane>
      
  </body>
</html>
&#13;
&#13;
&#13;

0 个答案:

没有答案