Fatal编程技术网
  • angularjs/
  • Angularjs ng模型一次仅从一个选项卡保存到webSQL数据库

Angularjs ng模型一次仅从一个选项卡保存到webSQL数据库

angularjs tabs ionic-framework

Angularjs ng模型一次仅从一个选项卡保存到webSQL数据库,angularjs,tabs,ionic-framework,web-sql,Angularjs,Tabs,Ionic Framework,Web Sql,我使用的是带有选项卡式界面的Ionic。表1有一些基本数据，表2有一些更详细的数据 我使用的db插入如下所示： $scope.insert = function(date_in, basic_data1, basic_date2, detail1, detail2, detail3) { db.transaction(function(tx){ tx.executeSql("INSERT OR REPLACE INTO 'stats' (date, age, gender, val1, va

我使用的是带有选项卡式界面的Ionic。表1有一些基本数据，表2有一些更详细的数据

我使用的db插入如下所示：

$scope.insert = function(date_in, basic_data1, basic_date2, detail1, detail2, detail3) {
db.transaction(function(tx){
  tx.executeSql("INSERT OR REPLACE INTO 'stats' (date, age, gender, val1, val2, val3) VALUES (?,?,?,?,?,?)", [date_in, basic_data1, basic_date2, detail1, detail2, detail3);
  },function(e){
    $log.log("ERROR: " + e.message);
  });
}
这可用于插入当前选项卡上的数据。以下是ng点击：

ng-click="insert(currentDate, userage, usergender, user_detail1, user_detail2, user_detail3)"
以及形式元素：

<label class="item item-input">
        <i class="icon ion-clock"></i> 
        <span class="input-label smalltext"> Age</span>
        <input type="number" ng-model="userage">
      </label>


年龄
我正在Chrome开发控制台中查看webSQL数据库。插入工作正常，它会像应该的那样覆盖。但它只保存您所在选项卡上的DB部分

例如，如果我从表1中保存日期、年龄和性别，则保存。如果我从选项卡2保存日期和详细信息1、2和3保存。此会用“未定义”覆盖数据的另一部分，即使返回到另一个选项卡显示数据仍在字段中

日期有效的原因是绑定到同一型号的两个选项卡上都有一个日期选择器-currentDate

如何从两个选项卡中获取每次由我的函数处理的数据？我使用jQM从未遇到过这个问题

这是控制器中的代码：

.controller('SettingsCtrl', function($scope, $rootScope, $localstorage, $log, $ionicPopup, $ionicActionSheet, $timeout, $cordovaDatePicker) {
$scope.insert = function(date_in, weight_in, heartrate_in, sysbp_in, diabp_in, neck_in, chest_in, biceps_in, waist_in, forearms_in, thighs_in, calves_in) {
console.log(date_in, weight_in, heartrate_in, sysbp_in, diabp_in, neck_in, chest_in, biceps_in, waist_in, forearms_in, thighs_in, calves_in);
db.transaction(function(tx){
  tx.executeSql("INSERT OR REPLACE INTO 'stats' (date, weight, heartrate, sysbp, diabp, neck, chest, biceps, waist, forearms, thighs, calves) VALUES (?,?,?,?,?,?,?,?,?,?,?,?)", [date_in, weight_in, heartrate_in, sysbp_in, diabp_in, neck_in, chest_in, biceps_in, waist_in, forearms_in, thighs_in, calves_in]);
  console.log("The inserted weight is", weight_in);
  console.log("The inserted date is", date_in);
  console.log("The inserted neck is", neck_in);
  console.log("The inserted chest is", chest_in);
  },function(e){
    $log.log("ERROR: " + e.message);
  });
}

 $scope.data = {};

$scope.select = function(date) {
db.transaction(function(tx){
  tx.executeSql("SELECT date, weight, heartrate, sysbp, diabp, chest, biceps, waist, forearms, thighs, calves FROM stats where date =?", [date, weight, heartrate, sysbp, diabp, chest, biceps, waist, forearms, thighs, calves]);
  console.log("The inserted weight is", y);
  },function(e){
    $log.log("ERROR: " + e.message);
  });       
}

$scope.usergender = $localstorage.get('storeGender');
$scope.userage = parseInt($localstorage.get('storeAge'));
$scope.userheight = parseInt($localstorage.get('storeHeight'));
$scope.userunits = $localstorage.get('storeUnits');
$scope.userdate = $localstorage.get('storeDate');
$scope.useranalytics = $localstorage.get('storeAnalytics');

$scope.changeVal = function(storeName, val){
$localstorage.set(storeName,val);
console.log(storeName + " is now " + val);
}

 // Date converter UK or US //
 Date.prototype.dateConvertUK = function() {
function two(n) {
  return (n < 10 ? '0' : '') + n;
}
return two(this.getDate()) + '/' + two(this.getMonth() + 1) + '/' + this.getFullYear();
};

Date.prototype.dateConvertUS = function() {
function two(n) {
  return (n < 10 ? '0' : '') + n;
}
return two(this.getMonth() + 1) + '/' + two(this.getDate()) + '/' + this.getFullYear();
  };

 var dateTypeUK = true;

// Set todays date
  var d = new Date();
 console.log("New Date is", d);
 if(dateTypeUK===true){
   today = d.dateConvertUK();
    console.log("Today (coverted UK) is", today);
  }else{
   today = d.dateConvertUS();
  console.log("Today (coverted US) is", today);
 } 

 $scope.currentDate = today;

 //Convert date to string
 $scope.dateToString = function(date){
 return date.toString();
} 

var options = {
date: new Date(),
mode: 'date', // or 'time'
minDate: new Date() - 10000,
allowOldDates: true,
allowFutureDates: false,
doneButtonLabel: 'DONE',
doneButtonColor: '#F2F3F4',
cancelButtonLabel: 'CANCEL',
cancelButtonColor: '#000000'
 };

$scope.popupDate = function(){
   console.log("in the popup");
  $cordovaDatePicker.show(options).then(function(date){
     $scope.currentDate = date;
     console.log("processed date is", date);
  });
}   

});

.controller（'SettingsCtrl'，function（$scope、$rootScope、$localstorage、$log、$ionicPopup、$ionicActionSheet、$timeout、$cordovaDatePicker）{
$scope.insert=功能（日期英寸、体重英寸、心率英寸、系统血压英寸、糖尿病英寸、颈部英寸、胸部英寸、二头肌英寸、腰部英寸、前臂英寸、大腿英寸、小腿英寸）{
console.log（日期、体重、心率、系统血压、糖尿病、颈部、胸部、二头肌、腰部、前臂、大腿、小腿）；
数据库事务（功能（tx）{
tx.executeSql（“插入或替换到‘统计’（日期、体重、心率、系统血压、糖尿病血压、颈部、胸部、肱二头肌、腰部、前臂、大腿、小腿）值（？，，，，，，，，，，，？，，，，，，，），[date_-in，weight_-in，心率_-in，系统血压_-in，糖尿病血压_-in，颈部_-in，胸部_-in，肱二头肌_-in，腰部_-in，前臂_-in，大腿_-in，小腿_-in，小腿_-in]）；
console.log（“插入的重量为”，重量单位为）；
console.log（“插入日期为”，date_in）；
console.log（“插入的颈部为”，颈部为）；
控制台日志（“插入的箱子是”，箱子在里面）；
}，功能（e）{
$log.log（“错误：+e.message”）；
});
}
$scope.data={}；
$scope.select=函数（日期）{
数据库事务（功能（tx）{
tx.executeSql（“选择日期、体重、心率、sysbp、diabp、胸部、肱二头肌、腰部、前臂、大腿、小腿，从日期=？”，[日期、体重、心率、sysbp、diabp、胸部、肱二头肌、腰部、前臂、大腿、小腿]）；
console.log（“插入的重量为”，y）；
}，功能（e）{
$log.log（“错误：+e.message”）；
});       
}
$scope.usergender=$localstorage.get（'storeGender'）；
$scope.userage=parseInt（$localstorage.get（'storeAge'）；
$scope.userheight=parseInt（$localstorage.get（'storeHeight'））；
$scope.userunits=$localstorage.get（'storeUnits'）；
$scope.userdate=$localstorage.get（'storeDate'）；
$scope.useranalytics=$localstorage.get（'storeAnalytics'）；
$scope.changeVal=函数（storeName，val）{
$localstorage.set（storeName，val）；
log（storeName+“现在是”+val）；
}
//日期转换器英国或美国//
Date.prototype.dateConvertUK=函数（）{
功能二（n）{
返回（n<10？'0'：''）+n；
}
返回两个（this.getDate（））+'/'+two（this.getMonth（）+1）+'/'+this.getFullYear（）；
};
Date.prototype.dateConvertUS=函数（）{
功能二（n）{
返回（n<10？'0'：''）+n；
}
返回两个（this.getMonth（）+1）+'/'+two（this.getDate（））+'/'+this.getFullYear（）；
};
var dateTypeUK=true；
//设定今天的日期
var d=新日期（）；
控制台日志（“新日期为”，d）；
如果（dateTypeUK==真）{
今天=d.dateConvertUK（）；
log（“今天（隐蔽的英国）是”，今天）；
}否则{
今天=d.dateConvertUS（）；
log（“今天（隐蔽的美国）是”，今天）；
} 
$scope.currentDate=今天；
//将日期转换为字符串
$scope.dateToString=函数（日期）{
返回日期。toString（）；
} 
变量选项={
日期：新日期（），
模式：'日期'，//或'时间'
minDate:新日期（）-10000，
allowOldDates：是的，
allowFutureDates:false，
doneButtonLabel:“完成”，
doneButtonColor:“#F2F3F4”，
CancelButton标签：“CANCEL”，
cancelButtonColor:“#000000”
};
$scope.popupDate=函数（）{
console.log（“在弹出窗口中”）；
$cordovaDatePicker.show（选项）。然后（函数（日期）{
$scope.currentDate=日期；
console.log（“处理日期为”，日期）；
});
}   
});
html中的代码是：

<ion-view view-title="Vitals">
<ion-nav-buttons side="secondary">
  <button class="button smalltext" ng-click="popupDate()">
    <i class="icon ion-calendar"></i> {{currentDate}}
  </button>
</ion-nav-buttons>
<ion-content class="padding" has-bouncing="false">
<div class="list">
<label class="item item-input">
    <i class="icon ion-podium"></i>
    <span class="input-label smalltext">Weight (<span id="weightunit">kg</span>)</span>
    <input type="number" ng-model="data.userweight" placeholder="0">kg
  </label>
  <div class="item item-button-right smalltext">
    Your BMI is: high 
    <button class="button button-stable button-clear">
      <i class="icon ion-help-circled"></i>
    </button>
  </div>
</div>
<div class="list">
  <label class="item item-input">
    <i class="icon ion-heart"></i>
    <span class="input-label smalltext">Heart Rate (bpm)</span>
    <input type="number" ng-model="data.userheartrate" placeholder="0">
  </label>
  <div class="item item-button-right smalltext">
    Your Heart Rate is: 
    <button class="button button-stable button-clear">
      <i class="icon ion-help-circled"></i>
    </button>
  </div>
</div>
<div class="list">
  <div class="item item-divider smalltext">
    <i class="icon ion-stats-bars"></i> Blood Pressure
  </div>
  <div class="row">
        <div class="col noPadding">
          <label class="item item-input">
            <i class="icon ion-arrow-up-b"></i>
            <span class="input-label smalltext">Systolic</span>
            <input type="number" placeholder="0" ng-model="data.usersysbp">
          </label>
        </div>
        <div class="col noPadding">
          <label class="item item-input">
            <i class="icon ion-arrow-down-b"></i>
            <span class="input-label smalltext">Diastolic</span>
            <input type="number" placeholder="0" ng-model="data.userdiabp">
          </label>
        </div>    
  </div>          
  <div class="item item-button-right smalltext">
    Your Blood Pressure is: 
    <button class="button button-stable button-clear">
      <i class="icon ion-help-circled"></i>
    </button>
  </div>
</div>
    <button class="button button-mygreen button-full" ng-click="insert(currentDate, data.userweight, data.userheartrate, data.usersysbp, data.userdiabp, data.userneck, data.userchest, data.userbiceps, data.userwaist, data.userforearms, data.userthighs, data.usercalves)">
      <i class="icon ion-android-archive"></i> Save
    </button>
  </ion-content>
</ion-view>


{{currentDate}}
重量（千克）
公斤
你的体重指数是：高
心率（bpm）
您的心率是：
血压
收缩的
舒张期
您的血压是：
拯救
由于每个选项卡都包含在ng if中，因此每个选项卡都创建自己的范围。因此，每个选项卡在其作用域上只包含其具有输入标记的属性。当调用insert方法（我假设它是在选项卡的父范围上创建的）时，将只定义选项卡上的属性

若要修复，请在与保存数据的insert函数相同的范围内创建一个对象，并修改选项卡上的输入以引用该数据：

因此，选项卡父级的控制器是：

.controller('tabmanager', function($scope) {
    $scope.insert = function(date_in, basic_data1, basic_date2, detail1, detail2, detail3) {
         db.transaction(function(tx){
             tx.executeSql("INSERT OR REPLACE INTO 'stats' (date, age, gender, val1, val2, val3) VALUES (?,?,?,?,?,?)", [date_in, basic_data1, basic_date2, detail1, detail2, detail3);
         },function(e){
              $log.log("ERROR: " + e.message);
         });
    }
    $scope.data = {};  //an empty object to hold your model data in this scope
})
您的标记更改为：

<label class="item item-input">
    <i class="icon ion-clock"></i> 
    <span class="input-label smalltext"> Age</span>
    <input type="number" ng-model="data.userage">
</label>
....
....
<button ng-click="insert(data.currentDate, data.userage, data.usergender, data.user_detail1, data.user_detail2, data.user_detail3)">Save</button>


年龄
....
....
拯救
由于每个选项卡都包含在ng if中，因此每个选项卡都创建了自己的作用域。因此，每个选项卡的作用域上都只有其具有输入标记的属性。当调用insert方法（我假设该方法是在选项卡的父作用域上创建的）时，将只定义选项卡上的属性

若要修复，请在与保存数据的insert函数相同的范围内创建一个对象，并修改选项卡上的输入以引用该数据：

因此，选项卡父级的控制器w