Question

我的Ionic应用程序中有一个相当基本的设置页面，标签视图如下所示：

<ion-view title="Settings">
  <ion-content class="has-header">

<ul class="list">

  <label class="item item-input item-label">
    <span class="input-label">Hours per week</span>
    <input type="text" value="37.5">
  </label>

  <label class="item item-input item-label">
    <span class="input-label">Days per week</span>
    <input type="text" value="5">
  </label>

  <label class="item item-input item-label">
    <span class="input-label">Pension Contribution</span>
    <input type="text">
  </label>

  <label class="item item-input item-select">
    <div class="input-label">
      Age
    </div>
    <select>
      <option selected>Under 65</option>
      <option>65-74</option>
      <option>75+</option>
    </select>
  </label>

  <label class="item item-input item-select">
    <div class="input-label">
      Weeks Option
    </div>
    <select>
      <option selected>Weekly</option>
      <option>2 Weeks</option>
      <option>4 Weeks</option>
    </select>
  </label>

      <li class="item item-toggle">
     National Insurance
     <label class="toggle toggle-positive">
       <input type="checkbox" value="on">
       <div class="track">
         <div class="handle"></div>
       </div>
     </label>
  </li>

  <li class="item item-toggle">
     Student Loan
     <label class="toggle toggle-positive">
       <input type="checkbox">
       <div class="track">
         <div class="handle"></div>
       </div>
     </label>
  </li>

   <li class="item item-toggle">
     Registered Blind
     <label class="toggle toggle-positive">
       <input type="checkbox">
       <div class="track">
         <div class="handle"></div>
       </div>
     </label>
  </li>

      <li class="item item-toggle">
     Married
     <label class="toggle toggle-positive">
       <input type="checkbox">
       <div class="track">
         <div class="handle"></div>
       </div>
     </label>
  </li>

</ul>

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

我想要做的是保存这些元素的状态（因此，如果用户每周输入不同的天数或打开/关闭复选框或从下拉列表中选择一个选项）到本地存储，下次启动应用程序时，它将加载这些保存的值。

我很难在Ionic docs中找到关于如何做到这一点的任何好信息，并且是Angular的新手，所以非常感谢任何帮助a）如何解决这个问题，或者b）我可以在哪里找到信息以了解如何操作。

干杯！

Answer 1

Yo可以在您的控制器中注入Angular-local-storage作为您的依赖项，然后可以在您的控制器中使用此代码

$scope.hoursPerWeek = '';
$scope.submitClicked = function(){
    localStorageService.set('hoursPerWeek',$scope.hoursPerWeek);
}

然而，首先在你的html中，你需要与hoursPerWeek对象进行双向绑定。

<label class="item item-input item-label">
   <span class="input-label">Hours per week</span>
   <input type="text" ng-model="hoursPerWeek" value="37.5">
</label>

对于每个领域，您需要采用类似的方法

在Ionic Framework中保存应用程序设置（AngularJS）

1 个答案: