Issue with AngularJS where Javascript function is not being triggered correctly

I'm in the process of creating a form for a project I'm working on. If you're interested, you can check out the project on Plunker by following this link: https://plnkr.co/edit/FNx7t48XFOJHrFzIpd1R?p

  1. MainController.js: This file contains a factory called FormDataService, which is responsible for tracking user input in real-time and saving it to Angular's front-end model.

  2. 129.html: Here is where the question is displayed.

  3. Sample.json: This JSON format file is utilized to populate the view found in 129.html.

  4. 129Ctrl.js: Simply a controller.

  5. app.js: In this file, I establish the routes for different views using ngroutes.

Within my 129Ctrl.js, I have included $scope.formData = {}; allowing me to store user inputs in formData. However, I've encountered an issue where upon page refresh, the formData is not persistent. The responsibility of handling this should fall on FormDataService within MainController.js, but for some reason, it's not functioning as expected.

javascriptangularjsjson

Answer №1

Upon refreshing the page, your controller is reinitialized and all variables and scopes are reset.

To maintain Angular's front-end model in real time, consider using $localStorage or $sessionStorage available in this repository.

There are also alternative repositories to explore.

This approach ensures data persistence throughout the lifespan of your application, even after a page refresh by the user.

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

Jquery vertical menu with a dynamic sliding animation from the right side to the left side

Hello everyone, I am looking to have my vertical menu slide from right to left instead of the typical top to bottom sliding that comes with using .toggle() in jQuery. Specifically, when the hamburger menu is clicked, I want the menu to slide out from right ...

javascriptjqueryhtmlcsshamburger-menu

Top technique for extracting json files from post requests using nodejs

Situation: I'm running a Node.js REST server that receives JSON files, parses them, and inserts them into a database. With an anticipated influx of hundreds of requests per second. Need: The requirement is to only perform insertions by parsing the JS ...

javascriptnode.js

Transferring class titles between div elements

I would like to implement a feature where class names on div elements shift after a brief delay, perhaps 10 seconds. My goal is for the 3 classes listed below to cycle through the div elements and start over once it reaches the last one. For instance: & ...

javascriptjqueryhtmlcss

The pdf2json encountered an error when attempting to process a PDF file sent via an HTTP

I am encountering an issue while attempting to extract information from PDF files using a nodejs script. Upon running the program, I encounter the following error: Error: stream must have data at error (eval at <anonymous> (/Users/.../node_modules/ ...

javascriptnode.jspdf

Vue.js caution about "Unnecessary non-emits event listeners" alert for events within RouterView

Is there a way for me to trigger events from my child components and have them reach the top-level App.vue component even though I am using a RouterView to render the child components in the App.vue template? <template> <Navbar /> <c ...

javascriptvue.js

How does React retain and display the previous values even after they have been updated?

https://codesandbox.io/s/objective-night-tln1w?file=/src/App.js After updating the data in the dropdown, the console displays the correct values. However, the dropdown itself continues to show the previous values. It seems that there may be an error relat ...

javascriptreactjs

MUI input remains static and unaltered

I tried to switch from my regular input to a Material-UI text field. Everything was working fine before, but now the value isn't changing. const handleChangeInput = (e) => { const { name, value } = e.target; console.log(e.target.value); ...

javascriptreactjsmaterial-ui

How to grab the content within an input field using Typescript within an Angular 2 framework

I am attempting to implement the functionality discussed in this particular post, but within an Angular2 framework. Essentially, I need to utilize the javascript function .setSelectionRange(start, end); on an input element after a user interacts with a tr ...

angularjstypescriptangular

Appwrite error message: Unable to access properties of undefined (looking for 'endpoint')

I am currently working on a project using Appwrite and I have encountered an issue with SDKs. When I use a client-side SDK to interact with the functions of Appwrite Teams, everything works perfectly like this: import { Client, Teams } from "appwrite& ...

javascriptnode.jsreactjsappwrite

Is there a way to show a progress bar that functions as the background for a table row

My table is structured as follows: th1 th2 th3 th4 th5 th6 td1 td2 td3 td4 td5 td6 td1 td2 td3 td4 td5 td6 I am looking to incorporate a feature where new rows are dynamically added using a form that triggers ...

javascripthtmlcssajaxhtml-table

Is there an easier way to coordinate CSS other than relying on JS?

It seems like I'm continuously resorting to using JavaScript too frequently for tasks that should ideally be achievable with CSS alone. Let's consider a specific scenario I'm tackling: div.outer { height:{Y}px } div.inner { padding-top:{Y} ...

javascriptjqueryhtmlcss

Utilize JavaScript to assign an identifier to an element created with createElement()

As a beginner in JavaScript, I am trying to set an id into some created tags but it doesn't seem to be working. var d1=document.createElement("div"); d1.setAttribute("class","container"); var b3= document.createElement("button"); b3.setAttri ...

javascripthtml

Classic ASP offers a feature that allows users to select all checkboxes at once

I'm looking to create a functionality where there is a 'Select all' checkbox along with individual checkboxes for each database record. Is it possible to use JavaScript to ensure that when the 'Select all' checkbox is checked, all ...

javascriptasp-classiccheckboxselectall

Utilizing a computed property in Vue data modeling

In my Vue data, I have defined a set of const properties. <script> import { mapGetters, mapActions } from 'vuex' export default { data() { const properties = ['Property 1', 'Property 2'] return { propert ...

javascripthtmlvue.js

The absence of the 'Access-control-allow-origin' header prevents access to the requested resource from the origin http://localhost:4200

Currently, I am facing an issue while trying to make a request from angular.js 4 to a Java REST API. The error message I am receiving is: "NO 'Access-control-allow-origin' header is present on the requested resource. Origin http://localhost:4200 ...

javaangularjsspring-mvc

If the button is clicked in jQuery, then perform a specific action; otherwise, execute

hello, I am encountering difficulties in getting this feature to function properly. I am utilizing cropbox to allow users to upload their logos. The issue arises when users do not click on the crop button again; it results in overwriting the existing file ...

javascriptjqueryif-statement

Is there a way to retrieve a JSON result from an API call using jQuery (or plain JavaScript) without relying on Ajax?

As someone new to JS and jQuery, I am working on building a key-value map from an API call that returns an array of key-value pairs. [{"key":"191","value":244}, ... , {"key":"920","value":130}] I have created the following ajax code in my attempt to achi ...

javascriptjqueryajaxjson

I'm having trouble pinpointing the issue in my JavaScript and HTML code

I'm having trouble in JavaScript trying to get my calculations to show up. The error message in my code says there is a missing variable declaration, but I'm not sure what else to do since I am new to this and have been stuck on it for days. It&a ...

javascripthtml

Incredible.js - Animated elements vanish within a fixed-height scrollable container

I recently implemented wow.js to add a fade-in effect to some divs nested under another div with fixed height and overflow set to auto. While most of the objects animate smoothly, I noticed that some of them either do not animate at all or fail to appear ...

javascriptjquerywow.js

Issue with Google Chrome not triggering onChange event in form entries

Is there a way to trigger a form's onchange event in Google Chrome (version 9.0.597.98 on Windows 7 64-bit)? Despite trying the example below, no console output is generated when testing. Interestingly, this works perfectly on Firefox version 3.6.13. ...

javascripthtmlgoogle-chrome