davidmaogomezz/Ionic Checkbox & LocalStorage.markdown

## index.html
<html ng-app="ionicApp">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

  <title>Checkboxes</title>

  <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
  <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
</head>

<body ng-controller="MainCtrl">

  <ion-view view-title="Checkboxes">
    <ion-content ng-controller="TheorieCtrl">
      <div class="list">
        saved in local Storage: {{output}}
        <ion-list>
          <ion-checkbox ng-repeat="thema in themen track by $index" class="checkbox-positive" type="checkbox" id="{{thema.id}}" ng-model="thema.checked" ng-change="updateThemaLocalStorage($index)" ng-checked="{{getCheck($index)}}">

            ( stored: {{getCheck($index)}} )
            <br> changed to: {{ thema.checked }}
            <br> {{ thema.name }}
          </ion-checkbox>
        </ion-list>
    </ion-content>
  </ion-view>
</body>

</html>

## Ionic Checkbox & LocalStorage.markdown

      
    Raw
  

              Ionic Checkbox & LocalStorage.markdown
            
          
    Ionic Checkbox & LocalStorage

This is my Ionic-Forum version of the Ionic Checkbox & LocalStorage for debugging and trying out things. There is a problem with the ng-change, not updating immediately after clicking a true checkbox.
A Pen by DeutschMark on CodePen.
License.

  
## script.js
angular.module('ionicApp', ['ionic'])

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

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

    $scope.themen = [
        { name: "1: one", id: 1 },
        { name: "2: two", id: 2},
        { name: "3: three", id: 3 },
        { name: "4: four", id: 4},
        { name: "5: five", id: 5 },
        { name: "6: six", id: 6},
        { name: "7: seven", id: 7 },
        { name: "8: eight", id: 8 },
        { name: "9: nine", id: 9 },
        { name: "10: ten", id: 10  },
        { name: "11: eleven", id: 11  },
        { name: "12: twelve", id: 12  },
    ];

    $scope.updateThemaLocalStorage = function ($index) {
        // Debug: call by index dynamically
        console.log("klicked index: " + $index);
        console.log($scope.themen[$index].name);
        console.log("current state: " + $scope.themen[$index].checked);

        // Actually doing the localStorage: set item to true/false
        console.log("recent saved state: " + $window.localStorage[ $index ]);
        $window.localStorage.setItem( $index, $scope.themen[$index].checked );
    };

    $scope.output = $window.localStorage;
  	console.log($scope.output);

    $scope.getCheck = function ($index) {
        // get the stored toggle (true or false) and
        // pass it over to the ng-checked in the html
        return $window.localStorage[ $index ];
    };
});
	<html ng-app="ionicApp">

	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

	<title>Checkboxes</title>

	<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
	<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
	</head>

	<body ng-controller="MainCtrl">

	<ion-view view-title="Checkboxes">
	<ion-content ng-controller="TheorieCtrl">
	<div class="list">
	saved in local Storage: {{output}}
	<ion-list>
	<ion-checkbox ng-repeat="thema in themen track by $index" class="checkbox-positive" type="checkbox" id="{{thema.id}}" ng-model="thema.checked" ng-change="updateThemaLocalStorage($index)" ng-checked="{{getCheck($index)}}">

	( stored: {{getCheck($index)}} )
	<br> changed to: {{ thema.checked }}
	<br> {{ thema.name }}
	</ion-checkbox>
	</ion-list>
	</ion-content>
	</ion-view>
	</body>

	</html>
	angular.module('ionicApp', ['ionic'])

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

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

	$scope.themen = [
	{ name: "1: one", id: 1 },
	{ name: "2: two", id: 2},
	{ name: "3: three", id: 3 },
	{ name: "4: four", id: 4},
	{ name: "5: five", id: 5 },
	{ name: "6: six", id: 6},
	{ name: "7: seven", id: 7 },
	{ name: "8: eight", id: 8 },
	{ name: "9: nine", id: 9 },
	{ name: "10: ten", id: 10 },
	{ name: "11: eleven", id: 11 },
	{ name: "12: twelve", id: 12 },
	];

	$scope.updateThemaLocalStorage = function ($index) {
	// Debug: call by index dynamically
	console.log("klicked index: " + $index);
	console.log($scope.themen[$index].name);
	console.log("current state: " + $scope.themen[$index].checked);

	// Actually doing the localStorage: set item to true/false
	console.log("recent saved state: " + $window.localStorage[ $index ]);
	$window.localStorage.setItem( $index, $scope.themen[$index].checked );
	};

	$scope.output = $window.localStorage;
	console.log($scope.output);

	$scope.getCheck = function ($index) {
	// get the stored toggle (true or false) and
	// pass it over to the ng-checked in the html
	return $window.localStorage[ $index ];
	};
	});