Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.

I have an AngularJS app using Ionic Framework which has a tabbed view with a Settings tab which will store user options for use. I want to use these settings when the app initially launches and while I could use the stored value in localStorage, I want to be able to check the options are set on the settings tab.

As it stands now, if you load the settings tab, you'll see one of the radio buttons sets itself from off to on as you load, and this is what happens whenever I set a default value that is on. How can I get this to be set when the app launches and not when the tab itself is opened?

This is what my controllers.js looks like:

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

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

        $ionicPlatform.ready(function() {
            if ( ! $window.localStorage.getItem( 'grossoption' ) ) {
            $window.localStorage.setItem( 'grossoption', 'year' );
        }

        if ( ! $window.localStorage.getItem( 'resultoption' ) ) {
            $window.localStorage.setItem( 'resultoption', 'month' );
        }
        });

        $scope.grossOptionsList = [
        { text: "Year", value: "year" },
        { text: "Month", value: "month" },
        { text: "Week", value: "week" },
        { text: "Day", value: "day" }
        ];

        $scope.resultsOptionsList = [
        { text: "Year", value: "year" },
        { text: "Month", value: "month" },
        { text: "Week", value: "week" },
        { text: "Day", value: "day" }
        ];

    // Default values
        $scope.data = {};
        $scope.data.grossOptions = 'year';
        $scope.data.resultOptions = 'month';


        $scope.updateGrossOptions = function(item) {
          $window.localStorage.setItem( 'grossoption', item.value );
            console.log( 'Gross option: ' + item.value );
        }

        $scope.updateResultOptions = function(item) {
          $window.localStorage.setItem( 'resultoption', item.value );
            console.log( 'Results option: ' + item.value );
        }

    })

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


        if ( ! $window.localStorage.getItem( 'toggle1' ) ) {
            $window.localStorage.setItem( 'toggle1', 'true' );
        }

        if ( ! $window.localStorage.getItem( 'toggle2' ) ) {
            $window.localStorage.setItem( 'toggle2', 'false' );
        }


    });

    $scope.data = {};
    $scope.data.toggle1 = $window.localStorage.getItem( 'toggle1' ) === "true";
    $scope.data.toggle2 = $window.localStorage.getItem( 'toggle2' ) === "true";

    $scope.update_toggle1 = function() {
        $window.localStorage.setItem( 'toggle1', $scope.data.toggle1 );
        console.log( 'Toggle 1: ' + $scope.data.toggle1 );
    }

    $scope.update_toggle2 = function() {
        $window.localStorage.setItem( 'toggle2', $scope.data.toggle2 );
        console.log( 'Toggle 2: ' + $scope.data.toggle2 );
    }

})

I've set up an example plnkr here which shows the behaviour my app currently has when you load the Settings tab.

Appreciate any feedback on how best to approach this in Angular.

share|improve this question

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Browse other questions tagged or ask your own question.