angularjsangular-ui-routerangularjs-routingangular-ui-router-extras

Where to store the current state data using angular js?


This issue is happening here. Plunker link -> https://run.plnkr.co/NMW85SbYq76ujSjV/

I need to store the current state data somewhere apart from local storage using angular js. I have a list of models(cards) in one angular page. And there are two tabs in each card. First tab is having only simple text but second tab is having one button. So when a user clicks on the button (which is present in the second tab) then it redirects to new state where we are showing the description of the current model.

Here one problem is there. When user is on first state (where all of the models are visible) then this user is free to select any tab from any model. So suppose, we have 10 models and user select tab 2 for model 2, 4, 5, and 9. So here the view is like model 1, 3, 6, 7, 8 and 10 will be showing the tab 1 content and rest of the models will be showing the tab 2 content. Now when he/she clicks on the button present in second tab(of any model) then it redirects to description of model state. And here is button to go back to previous state. When he/she clicks on this button then it redirects to models state but the it's showing tab 1 content in all of the models instead of previous selected tabs accordingly.

So how can i handle this situation. I want to show previous state when a user comes back fro description state to models state.

Please help me guys. Please click on the above link to get the implemented plunker sample. Any lead would be appreciated.

Thanks :)


Solution

  • You have to create a service and move the "flag" variable to the JSON. I have modified your plunker. Please check.

    https://plnkr.co/edit/5k8hXbCIid4NonSL4Y9k?p=preview

    var getData = {};
    
            getData.get = $http.get('template.json')
                .then(function(response) {
                  console.log(response);
                    return response.data;
                })
    
           return getData;   
    });
    
    myRouterApp.component('myModels', {
      templateUrl: 'models.html',
      controller: ['$scope', '$http', '$state','getModelSvc', function TrialCtrl($scope, $http, $state,getModelSvc) {
        $scope.models = [];
        console.log(getModelSvc);
      getModelSvc.get.then(function(data) {
              $scope.models = data.models;
                  console.log($scope.models);
        })