Storing data in Angular service for future use

My ui-grid is functioning correctly, utilizing server side pagination with a view button to display row details on a separate page. However, upon returning to the grid after viewing details, it defaults back to displaying the first page. I would like it to remember and render the current page before redirecting to the details.

For example, if I am on page 10 and click the details button, when I return I see page 1 instead of page 10, which is not ideal for user experience.

I have considered saving the page number in an Angular service but I am struggling to implement this functionality. Can anyone offer assistance or guidance on how to achieve this?

javascriptangularjsangular-ui-grid

Answer №1

Storing data in services allows for universal access within an app:

app.service('svc', function() {
    var currentPage;

    return {
        setCurrentPage(value) {
            currentPage = value;
        },
        getCurrentPage() {
            return currentPage;
        }
    };
});

To ensure the page number persists even after a page reload, consider utilizing html web storage or cookies.

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

Issue with the functionality of socket.io callback functions

Previously, I used to utilize the socket.io emit callback in the following manner: On the client side: mysocket.emit('helloworld', 'helloworld', function(param){ console.log(param); }); On the server side: var server = r ...

javascriptangularjsnode.jssocketscallback

What is the reason behind having several node modules directories within every project?

I'm just starting out with JS development and I have a question about the size of node modules. It seems that when many projects accumulate, we end up having to delete the node_modules folder because it takes up so much space. So, why isn't there ...

javascriptnode.jsnpmnode-modules

A step-by-step guide on selecting a checkbox within an alert popup using Selenium with Java

Hello everyone, I am struggling to find a solution for checking and unchecking a checkbox located in an alert window or modal pop-ups. We have three types of pop-ups: alert, confirm, and prompt. Specifically, in the confirm popup, there is a checkbox t ...

javascriptjavaseleniumwebdriver

What causes the conflict between Nodejs usb module and Electron?

Apologies for the lengthy post, but I've been tirelessly searching for a solution online without any luck. My goal is to create a basic Electron application that can display an HTML page (which is working fine) and control a printer through the USB mo ...

javascriptnode.jslinuxnpmelectron

The DELETE function in express.js with MySQL integration is encountering a problem where it is unable to

As I work on setting up my website, the backend utilizes express.js to send queries to a MySQL Database. However, when attempting to delete rows, no action seems to take place. function establishConnection() { return mysql.createConnection({ multipl ...

javascriptmysqlnode.jsexpress

What is causing the element to disappear in this basic Angular Material Sidenav component when using css border-radius? Check out the demo to see the issue in action

I have a question regarding the Angular Material Sidenav component. I noticed that in the code below, when I increase the border-radius property to a certain value, the element seems to disappear. <mat-drawer-container class="example-container" ...

javascripthtmlcssangularangular-material

Can you explain the distinction between using get() and valueChanges() in an Angular Firestore query?

Can someone help clarify the distinction between get() and valueChanges() when executing a query in Angular Firestore? Are there specific advantages or disadvantages to consider, such as differences in reads or costs? ...

javascriptangulartypescriptfirebasegoogle-cloud-firestore

Is there a way to deactivate the dot key using the keyup event in Vue.js 2?

My current approach is as follows: <template> ... <input type="number" class="form-control" v-model="quantity" min="1" v-on:keyup="disableDot"> ... </template> <script> export default{ ... methods:{ ...

javascriptvue.jsvuejs2vue-componentvuex

Learn the best way to send query parameters through the Next.js navigation router and take advantage of

Currently, I am implementing import { useHistory } from 'react-router-dom' const history = useHistory() ... history.push('/foo?bar=10') However, only the 'foo' part is being pushed into the url. What is the correct way to pas ...

javascriptnext.js

Synchronization issue between CSS style and Javascript is causing discrepancies

I am looking to avoid using jquery for simplicity. I have three websites that each page cycles through. My goal is to scale the webpages by different values. I attempted applying a class to each page and used a switch statement to zoom 2x on Google, 4x o ...

javascripthtmlcssiframe

Pusher authentication issue: socket ID not defined

I am currently facing an issue while trying to establish a private channel for users to transmit data to my node.js server. Upon making the request, I encounter an error where pusher:subscription_error is returned with the error code 500. Upon checking my ...

javascriptnode.jsopenshiftpusher

Create a function that adds a new div element with a one-of-a-kind identification when

I am currently developing a web application on www.firstusadata.com/cash_flow_test/. The functionality involves two buttons that add products and vendors dynamically. However, the issue I'm facing is that the appended divs do not have unique IDs, maki ...

javascriptphpjqueryhtmlappend

What specific types of errors is this try-catch block designed to catch and manage?

// This function establishes a connection to MongoDB using Mongoose const connectToDatabase = (url) => { return mongoose.connect(url, { useNewUrlParser: true, useUnifiedTopology: true }) .then(() => console.log('Conn ...

javascriptnode.jsexpress

Sometimes, the `undefined` TypeError can unexpectedly pop up while making Ajax calls

Here is my issue with AJAX request and response: I have around 85 HTML pages that all use the same AJAX request. However, when working with these files, I sometimes encounter the following error. AJAX $(document).ready(function(){ localStorage.setIte ...

javascriptjqueryhtmlajax

Ways to simulate file operations in sinon?

I have a function that unzips a file from the directory, and it is working perfectly fine. index.js const unZip = async (zipFilePath, destDir) => { await util.promisify(fs.mkdir)(destDir); return new Promise((resolve, reject) => { fs.create ...

javascriptnode.jsunit-testingsinonava

Revamp the HTML page by automatically refreshing labels upon every Get request

My HTML webpage requires real-time updates for one or more labels. To achieve this, I have incorporated CSS and JS animations into the design. Currently, I am utilizing Flask to handle all the calls. I face a challenge where I need to consistently update ...

javascriptpythonhtmlajaxflask

Struggling with JavaScript's getElementById function

If anyone has any suggestions or alternative methods, please kindly assist me. I currently have: 1 Textbox 1 Label 1 LinkButton Upon clicking the lnk_NameEdit button, the txtUserName textbox should become visible while the lblusername label should becom ...

c#javascriptasp.netajax

Struggling to construct a project using parcel, continually encountering issues with unsupported file types

My attempt at creating a project using parcel has hit a snag. Despite diligently following the guidelines provided in my assignment, an error message consistently appears in my terminal each time I initiate the command: parcel src/index.html The error mes ...

javascriptnpmpackage.jsonparceljs

Ensuring consistency between TypeScript .d.ts and .js files

When working with these definitions: https://github.com/borisyankov/DefinitelyTyped If I am using angularJS 1.3.14, how can I be certain that there is a correct definition for that specific version of Angular? How can I ensure that the DefinitelyTyped *. ...

javascriptangularjstypescript

Adding a fresh element and removing the initial item from a collection of Objects in JavaScript

I'm working on creating an array of objects that always has a length of five. I want to push five objects initially, and once the array reaches a length of five, I need to pop the first object and push a new object onto the same array. This process sh ...

javascriptangulartypescriptmultidimensional-array