Loading a previously saved Sortable in Angular UI

I have a tabset that can be sorted, and it works as expected. However, I would like the user's tab order to be saved and not lost when they refresh the page.

 <uib-tabset  ui-sortable="sortableOptions" class="tab-container"  my-restrict access="staff-businessDeveloper">
                    <uib-tab ng-controller="FirstCtrl" >
                        <tab-heading>
                            <i class="icon icon-user-following "></i> Dealers
                        </tab-heading>
                        <div class="panel-body table-responsive no-padding">
                            <table class="table table-striped table-responsive">
                            Some Stuff
                            </table>
                        </div>
                    </uib-tab>
  <uib-tab ng-controller="SecondTabCtrl" >
                        <tab-heading>
                            <i class="icon icon-user-following "></i> Dealers2
                        </tab-heading>
                        <div class="panel-body table-responsive no-padding">
                            <table class="table table-striped table-responsive">
                            Some Stuff
                            </table>
                        </div>
                    </uib-tab>
                </uib-tabset>

Here is the logic for sortable tabs in the controller:

      $scope.sortableOptions = {
    axis: 'x',
    containment : "parent",
    cursor : "move",
    tolerance : "pointer",
    start: function(e, ui) {
    },
    update: function(e, ui) {
      $localStorage.tabOrder[$localStorage.me.id] = angular.element(this).sortable('toArray');
    }
  };

I am saving the tab order in $localStorage. How can I load it back?

javascriptangularjsjquery-uiangular-uijquery-ui-sortable

Answer №1

If you're looking for a reliable solution to manage local storage in your angular projects, I suggest checking out the angular-storage library. This library offers convenient functions for storing and retrieving data from local storage. It even has a built-in feature to use cookies as a fallback if local or session storage is not available.

Here's an example of how you can store settings using this library:

store.set('settings', {settings stuff});

You can then retrieve the stored settings like this:

var settings = store.get('settings');

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to animate the scaling of a CSS property using jQuery?

I need help creating an animation where a circle div with the class of "bubble" grows from nothing to its full size when a button is clicked using jQuery. I am currently facing difficulties in making it work properly. Here's my current code snippet: ...

javascriptjqueryhtmlcssjquery-animate

Extracting array elements and pushing them into the same array can be achieved using ES6

So I have this nested array: a1 = ['one', 'two', ['three', 'four']]; My goal is to extract the elements 'three' and 'four' from the child array and combine them with the parent array as a single ...

javascriptarraysangulartypescript

Is it possible to retrieve a JSON response by making a jQuery.ajax request to an appengine URL?

Attempting to retrieve response data via ajax from the following URL: http://recipesid.appspot.com/api.user?method=user.query&[email protected] Encountering issues when trying to run the code. Please assist in resolving this problem. $.ajax({ ...

javascriptjqueryajaxjsongoogle-app-engine

What is causing the extended wait times for ttfb when utilizing Local IIS?

Despite consistently receiving performance test results of around 50ms on my server, the response times for calls to controller methods in my C# code using AngularJS (1.4) or jQuery (1.9.1) are varying greatly. Sometimes the data is returned in less than 1 ...

c#jqueryangularjsiislocalhost

Can AngularJS Filters be used to convert a number into a string, but not the other way around?

After researching Angular JS filters, I discovered that the number filter is used to format a number as a string. However, there doesn't seem to be a built-in filter for converting a string to a number. In an attempt to solve this issue, here is so ...

javascripthtmlangularjsfiltertype-conversion

display information using AngularJS following an AJAX request

In my application, I have an AngularJS controller called 'FilterController'. This controller is used by the user to filter some data. When the user clicks on Search, a Mvc method is called that returns an object with the data. While this process ...

angularjs

Enhancing Array values within a Hashmap in JavaScript: Tips for Adding more Items

Is there a 'bar' key in the hashmap that has an array as its value with only one item ['foo']? I want to add another item, 'foo1', to the same array. Is the following code the right approach, or is there a simpler way to achie ...

javascript

What causes a Next.js App to crash when a prop is not defined in destructuring code?

Let me share the issue I am facing. I have developed a custom Context API wrapper to handle all my data. However, there is this docType property that may not always be defined or may not exist at times. When I destructure it in this way: const { docType } ...

javascriptnext.js

Why is it that my NextJS public script isn't being bundled?

I am facing an issue with three components interacting and I need help in properly bundling them together. There is dynamic configuration on the page that exists within an inline script A static script located in the public folder which utilizes the dynam ...

javascriptnext.js

React app experiencing issues with Bootstrap offset functionality specifically when paired with a button element

I am struggling to position the button after two columns of space in this code snippet. Despite my efforts, the button remains pulled to the left and I can't seem to update it. { values.contact_persons_attributes.length < 2 && <div className= ...

javascripttwitter-bootstrapreactjsbootstrap-4

Prevent scrolling in AngularJS model popups

When loading data for the first time in a model popup, the scroll bar is not displayed inside the popup. However, after performing a search function and filtering the data, the scroll bar appears inside the model popup. How can this issue be fixed? this ...

javascriptangularjs

Developing with AngularJS: Implementing Asynchronous Data Loading

Whenever I call a function, I encounter a Cannot read property of undefined error message, even though the data is being displayed correctly. From my understanding so far, this issue arises due to the asynchronous loading of data by AngularJS, and using p ...

javascriptangularjsasynchronouspromiseangular-promise

Managing errors with Node.js and handling https certificates

In short: I am developing a node application that sends requests using the secure version of HTTP, which is HTTPS. When I incorrectly configure my request options, I encounter the following error: Node.js Hostname/IP doesn't match certificate' ...

javascriptnode.jshttpserror-handling

Introducing a fresh input field that includes a dropdown selection feature

When a user clicks on the "+" button, a new row should be added with a dropdown and input field. I want the input field name to be the dropdown value for each row. If "Facebook" is selected in the first dropdown, it should not appear in the second dropdo ...

javascriptphpjqueryhtmlcss

Maintaining jQuery Chosen multiple selection menu open while selecting multiple options

I'm using Chosen to enhance the appearance and functionality of my <select> element with a search input feature. The issue arises when using a <select multiple>; each time the user opens the dropdown menu to select options, it closes afte ...

javascriptjquerydrop-down-menujquery-chosen

Execute JavaScript code before analyzing the content

I need to extract data from a different website, but the challenge is that this website loads its content using JavaScript. Every solution I've found on platforms like Stackoverflow and Google attempts to parse the source before the content is fully l ...

javascriptjqueryajax

The issue persists as the Ajax request continues to return false

I have created a verification program using an ajax request: $("#codeSbmt").click(function(){ var $input = $("#fourDigit"); codeCheck("codeTest.php?q=" + $input); }) function codeCheck(url) { var xh ...

javascriptphpajax

What is the best way to send an array from a JavaScript function on a JSP page to the controller class?

After implementing a JavaScript button action to push all checked elements on a jsp page into an array, the next step is passing this array to the controller class for further manipulation. Specifically, I need to be able to delete elements from that array ...

javascriptjavaspring-mvc

Issue: Getting [$injector:unpr] error related to the loginFactory module in AngularJS

Having an issue implementing a login feature with angularjs. The loginFactory I created keeps throwing an Unknown Provider error. Here is the code snippet from my factory.js file. loginFactory.$inject = ['$resource', '$q']; function lo ...

angularjscakephp-2.0

Printing feature causing conflicts with other jQuery event listeners

After successfully printing the content of a div on click, I encounter the issue that none of my jQuery events work after canceling the print preview. This seems to happen without requiring a page refresh. I'm puzzled as to why this occurs and would ...

javascriptjqueryhtmlcss