CODEWITHSUNDEEP
angularjsionic-frameworkangular-local-storage
Sparker0i
Sparker0i

Reputation: 1851

Store and retrieve an array value using angular-local-storage in Ionic

Okay so I have a controller SettingsCtrl in my code given as :

.controller('SettingsCtrl' , function($scope, localStorageService) {
    $scope.verseOptions = [5 , 10, 15, 20];
    $scope.verses = JSON.stringify($scope.verseOptions);
    console.log($scope.verses);
    console.log($scope.verses[3]);
    $scope.dd = JSON.parse($scope.verses);
    console.log($scope.dd);
    var d = $scope.dd[1];
    console.log(d);

    $scope.config = {
        numVerses: localStorage.getItem('numVerses' , 23),
        selectedVerse : localStorage.setItem('verseOption' , d) || $scope.verseOptions[1]
    };

    $scope.save = function() {
     console.log($scope.config.numVerses);
     localStorage.setItem('numVerses', $scope.config.numVerses);
     localStorage.setItem('verseOption' , $scope.config.selectedVerse);
     console.log($scope.config.selectedVerse);
   };
})

Given the array verseOptions and config.selectedVerse .

In my ion-view, I load the config.numVerses value inside an input box and config.verses inside a drop down list as : 

<label class="item item-input item-label">
        <span class="input-label">Number Of Verses</span>
        <input type="text" ng-model="config.numVerses">
        </label>
        <label class="item item-input item-select">
            <div class="input-label">
                Verses
            </div>
            <select ng-model='config.selectedVerse'>
                <option ng-repeat='verse in dd'>
                    {{verse}}
                </option>
            </select>
        </label>

When a save button inside the view is clicked, it invokes the save() of the controller. With the save() function I want to save the array element inside the localStorage. For example, if I select 5 from the drop down, it should save the array index having value 5 in such a way that it can be reloaded upon next start.

For me, saving and loading numVerses value works, but the selectedVerse value (from the drop down doesnt work). When I try to reload the values on next start, numVerses shows as is, but the drop down shows as blank option selected

PS. I am using the angular-local-storage module.

Any help would be appreciated.

Upvotes: 2

Views: 957

Answers (2)

Ram_T
Ram_T

Reputation: 8484

If you want store numVerses array and selectedVerse in local storage, just do this on save(). To push an array into local storage, you must stringify it before pushing and parse after retrieving.

$scope.config = {

numVerse:localStorage.getItem('numVerses')?JSON.parse(localStorage.getItem('numVerses')):[],

 selectedVerse:localStorage.getItem('selectedVerse')?JSON.parse(localStorage.getItem('selectedVerse')):null

};

$scope.save = function (){

$scope.config.numVerses.push($scope.selectedVerse)

localStorage.setItem('numVerses', JSON.stringify($scope.config.numVerses))

localStorage.setItem('selectedVerse', $scope.selected verse) }

Upvotes: 0

Austin
Austin

Reputation: 36

Instead of using ng-repeat to cycle through your list of verses try using Angulars ng-options

This allows you to automatically bind an array or json object to a select-option and track different aspects of those data structures to the options value field.

So you could track by array index like so:

<select ng-model='config.selectedVerse' 
        ng-options='verse for (idx, verse) in dd track by idx'>
</select>

Yielding the following html:

<select ng-model="config.selectedVerse" ng-options="verse for (idx, verse) in dd track by idx" class="ng-pristine ng-valid ng-empty ng-touched">
    <option label="5" value="0">5</option>
    <option label="10" value="1">10</option>
    <option label="15" value="2">15</option>
    <option label="20" value="3">20</option>
</select>

Upon hitting save your ng-model (config.selectedVerse) should take on the value field from the selected option.

As for saving to local storage I'm not to familiar with the syntax of that plugin but you should be able to get and set data using the window.localStorage syntax (ensuring to stringify and parse data as its being get and set) to save it.

window.localStorage['myData'] = JSON.stringify(config);
$scope.myData = JSON.parse(window.localStorage[request];

Upvotes: 0

Related Questions