185
rated 0 times
[
192]
[
7]
/ answers: 1 / hits: 16019
/ 10 Years ago, fri, august 1, 2014, 12:00:00
I need to track when a user changes the state of a checkbox in Ionic, save it to localStorage, and then use it to load again later - so it remembers their settings.
My toggle code looks like this:
<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>
And in my controller I have:
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 );
}
})
However, it logs out to the console as undefined. If I explicitly set $scope.ni_toggle = false; it will log false and won't update to true when I toggle the checkbox to on.
EDIT:
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>
Working example of the problem
More From » angularjs
