Pregunta

Tengo una página de configuración bastante básica en mi aplicación iónica, y la vista de pestaña se ve así:

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

Lo que quiero hacer es guardar los estados de estos elementos (por lo que si el usuario ingresa a un número diferente de días por semana o al desactivar una casilla de verificación o elegir una opción de una lista desplegable) al almacenamiento local para queQue la próxima vez se inicie la aplicación, cargará estos valores guardados.

Me está divirtiendo mucho información sobre cómo hacerlo en los documentos iónicos y soy nuevo en angular, así que apreciaría cualquier ayuda en una a) cómo hacerlo, o b) donde puedaEncuentra la información para aprender a hacerlo.

vítores!

¿Fue útil?

Solución

yo puede inyectar almacenamiento de local angular en su controlador como su dependencia y luego puede tenerEste código en su controlador

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

Sin embargo, primero en su HTML, debe tener una vinculación de dos vías con el objeto Hoysperweek.

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

Para cada campo que necesita tener un enfoque similar

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top