Obtener y establecer una casilla de verificación en Ionic Framework (AngularJS)

https://stackoverflow.com//questions/25080212

02-01-2020
|

Pregunta

Necesito la pista cuando un usuario cambia el estado de una casilla de verificación en Iónica, guardarlo en localStorage, y luego se usa para cargar de nuevo más tarde - por lo que recuerda de su configuración.

Mi alternancia de código se parece a esto:

<li class="item item-toggle">
     National Insurance {{ni_toggle}}
     <label class="toggle toggle-positive">
       <input type="checkbox" ng-model="ni_toggle" ng-click="updateLocalStorage()" id="has_national_insurance" name="has_national_insurance">
       <div class="track">
         <div class="handle"></div>
       </div>
     </label>
  </li>

Y en mi controlador que tengo:

angular.module('starter.controllers', [])

.controller('SettingsCtrl', function($scope, $ionicPlatform) {
    $ionicPlatform.ready(function() {
    // Ready functions

    });

 $scope.updateLocalStorage = function() {

    window.localStorage.setItem( 'has_national_insurance', $scope.ni_toggle );
    console.log( $scope.ni_toggle );

}

})

Sin embargo, se cierra la sesión en la consola de la undefined.Si me establezca explícitamente $scope.ni_toggle = false; se registrará falso y no actualizar a la verdad cuando me alternar la casilla de verificación activada.

EDITAR:

app.js:

// Ionic Starter App

// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
// 'starter.services' is found in services.js
// 'starter.controllers' is found in controllers.js
angular.module('starter', ['ionic', 'starter.controllers', 'starter.services'])

  .run(function($ionicPlatform) {
    $ionicPlatform.ready(function() {
      // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
      // for form inputs)
      if(window.cordova && window.cordova.plugins.Keyboard) {
        cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
      }
      if(window.StatusBar) {
        // org.apache.cordova.statusbar required
        StatusBar.styleDefault();
      }

    });
  })



.config(function($stateProvider, $urlRouterProvider) {

  // Ionic uses AngularUI Router which uses the concept of states
  // Learn more here: https://github.com/angular-ui/ui-router
  // Set up the various states which the app can be in.
  // Each state's controller can be found in controllers.js
  $stateProvider

    // setup an abstract state for the tabs directive
    .state('tab', {
      url: "/tab",
      abstract: true,
      templateUrl: "templates/tabs.html"
    })

    // Each tab has its own nav history stack:

    .state('tab.dash', {
      url: '/dash',
      views: {
        'tab-dash': {
          templateUrl: 'templates/tab-dash.html',
          controller: 'DashCtrl'
        }
      }
    })

    .state('tab.settings', {
      url: '/settings',
      views: {
        'tab-settings': {
          templateUrl: 'templates/tab-settings.html',
          controller: 'SettingsCtrl'
        }
      }
    })

    .state('tab.info', {
      url: '/info',
      views: {
        'tab-info': {
          templateUrl: 'templates/tab-info.html',
          controller: 'InfoCtrl'
        }
      }
    })

        .state('tab.about', {
      url: '/about',
      views: {
        'tab-about': {
          templateUrl: 'templates/tab-about.html',
          controller: 'AboutCtrl'
        }
      }
    })

  // if none of the above states are matched, use this as the fallback
  $urlRouterProvider.otherwise('/tab/dash');

});

controllers.js:

angular.module('starter.controllers', [])

.controller('DashCtrl', function($scope) {
})

.controller('SettingsCtrl', function($scope, $window, $ionicPlatform) {
    $ionicPlatform.ready(function() {

    });

    $scope.ni_toggle = $window.localStorage.getItem('has_national_insurance') === "true";

    $scope.updateLocalStorage = function() {
            $window.localStorage.setItem( 'has_national_insurance', $scope.ni_toggle );
            console.log( $scope.ni_toggle );
        }   


})

.controller('InfoCtrl', function($scope) {
})

.controller('AboutCtrl', function($scope) {
});

templates/tab-settings.html:

<li class="item item-toggle">
     National Insurance {{ni_toggle}}
     <label class="toggle toggle-positive">
       <input type="checkbox" ng-model="ni_toggle" ng-change="updateLocalStorage()" id="has_national_insurance" name="has_national_insurance">
       <div class="track">
         <div class="handle"></div>
       </div>
     </label>
  </li>

Ejemplo de trabajo de el problema

Solución

Yo no estoy familiarizado con Iónica del rarezas (si las hay), sino de un general de JS perspectiva parece ser que hay un par de problemas con el código.

Usted no está inicializando ni_toggle.
Usted está utilizando ngClick que serán despedidos antes de el modelo ha sido actualizado por el ngModel directiva.
Usted debe utilizar ngChange en su lugar.
En Angular, usted debe utilizar $window en lugar de window (no duele y puede resultar útil en muchos casos (por ejemplo,las pruebas)).
Tenga en cuenta que localStorage sólo puede almacenar cadenas de caracteres (no booleanos).Así que, incluso si se pasa false, será almacenado como 'false', que es equivalente a true cuando se lanza a boolean.

Tomando lo anterior en cuenta, el código debe ser similar a esto:

<input type="checkbox" ng-model="ni_toggle" ng-change="updateLocalStorage()" ... />

.controller('SettingsCtrl', function($scope, $window, $ionicPlatform) {
    $ionicPlatform.ready(function() {
        // Ready functions
    });

    $scope.ni_toggle = $window.localStorage.getItem('has_national_insurance') === 'true';
    $scope.updateLocalStorage = function () {
        $window.localStorage.setItem('has_national_insurance', $scope.ni_toggle);
        console.log($scope.ni_toggle);
    };
});

Ver, también, este breve demostración.

Otros consejos

Me encontré en una situación similar para mostrar la información de usuario hace un tiempo con mi iónica de la aplicación.No tengo el código fuente original en frente de mí, pero estoy bastante seguro de que esta es la forma en que deben hacerlo.

angular.module('starter.controllers', [])

    .controller('SettingsCtrl', function($scope, $ionicPlatform) {

        this.toggle = true; // make sure its defined somewhere

        $scope.ni_toggle = function() {
            return this.toggle;
        }

        $scope.updateLocalStorage = function() {
            window.localStorage.setItem(
                'has_national_insureance',
                $scope.ni_toggle
            );
            console.log($scope.ni_toggle);
        }

    });

Espero que esto le va en la dirección correcta.

EDITAR Ver ExpertSystem la respuesta.Él respondió que mejor forma que pude.

No hay necesidad de cualquier definición de la función en el controlador

 <script>
 angular.module('checkboxExample', [])
.controller('ExampleController', ['$scope', function($scope) {
  $scope.checkboxModel = {
   value1 : true,
   value2 : 'YES'
 };
}]);

<form name="myForm" ng-controller="ExampleController">
<label>Value1:
<input type="checkbox" ng-model="checkboxModel.value1">
</label><br/>
<label>Value2:
<input type="checkbox" ng-model="checkboxModel.value2"
       ng-true-value="'YES'" ng-false-value="'NO'">
</label><br/>
<tt>value1 = {{checkboxModel.value1}}</tt><br/>
<tt>value2 = {{checkboxModel.value2}}</tt><br/>

Licenciado bajo: CC-BY-SA con atribución

No afiliado a StackOverflow