Enhancing the visual display of a webpage using AngularJS

Question

Enhancing the visual display of a webpage using AngularJS

Hello there! I'm currently working on enhancing an angular 1.6 app and have encountered a dilemma that needs solving. Let me provide some context: The page in question is a lengthy form consisting of thirty questions. The client-side logic includes numerous conditional statements, for example, if the user selects “Yes” on Q1, then display Q2-4, but if they choose "No" on Q1, skip to Q5. This pattern repeats throughout the extensive form.

Now, here's where things get interesting—what happens if a user mistakenly selects “Yes” on Q1, proceeds to answer Q2-4, and then decides that Q1 should actually be “No”?

So here are my two burning questions: 1) How can I effectively reset or clear the models? And 2) how do I update the view accordingly, ensuring that if they revisit Q1 choosing "Yes", Q2-Q4 are returned to their initial state?

Regarding the first issue, I've devised a simple “clearAll” method as shown below:

function clearAll(arr){
        arr.forEach(function(element){
            if(element!==undefined){
                 element = null; 
            }    
        });
    }

Although this function clears the models, it falls short when it comes to updating the view. How can I ensure that Q2-4 are visually cleared/blank?

My current idea involves updating the view via:

$scope.$watch( myModel, function(val){
    //set to null or delete?
}

However, I am struggling to generalize this solution to make it flexible enough to accommodate an array. Any tips or suggestions would be greatly appreciated. Thank you!

javascript angularjs angularjs-scope

Answer 1

Answer №1

To tackle your specific issue, my recommendation would be to utilize ui-router and resolve different states depending on a question. For example, you could have a state called state.questions where different parameters are taken into account. If your base intro page has the URL /questions (perhaps welcoming users to the questions section), then subsequent URLs like /questions/1 would represent the first question, /questions/2 the second question, and so on.

let questions = [];

This list of objects can be stored in a simple service throughout the application. It can later be populated with objects such as:

{ 
q1: {
  answers: [1,2,3]
},
{
q2: {
  answers: [1,3]
}

You have the option to clear this list once it's no longer needed or add new answers to it. Additionally, you can check for a specific answer before loading the state, offering you the flexibility to achieve your desired outcome.

If you're considering a less elegant solution, you might explore using $watch with a watch group and timeout in the following manner:

$scope.$watchGroup(arrayOfModels, (newVal, oldVal)=>{
  if(newVal) {
   // Perform the desired actions with the models here
   // If they don't take effect, consider using $timeout(()=> $scope.$apply());
  }
})

Answer 2

To tackle your specific issue, my recommendation would be to utilize ui-router and resolve different states depending on a question. For example, you could have a state called state.questions where different parameters are taken into account. If your base intro page has the URL /questions (perhaps welcoming users to the questions section), then subsequent URLs like /questions/1 would represent the first question, /questions/2 the second question, and so on.

let questions = [];

This list of objects can be stored in a simple service throughout the application. It can later be populated with objects such as:

{ 
q1: {
  answers: [1,2,3]
},
{
q2: {
  answers: [1,3]
}

You have the option to clear this list once it's no longer needed or add new answers to it. Additionally, you can check for a specific answer before loading the state, offering you the flexibility to achieve your desired outcome.

If you're considering a less elegant solution, you might explore using $watch with a watch group and timeout in the following manner:

$scope.$watchGroup(arrayOfModels, (newVal, oldVal)=>{
  if(newVal) {
   // Perform the desired actions with the models here
   // If they don't take effect, consider using $timeout(()=> $scope.$apply());
  }
})

Enhancing the visual display of a webpage using AngularJS

Answer №1

Similar questions

"Is it possible to keep an eye on two different events and take action once they both

Troubleshooting Problem with Express Server Routing

Receive real-time price updates from Next.js using GetServerSideProps data

Sending JSON-encoded data using HTML5 Server-Sent Events (SSE) is a

Use a swipe gesture to move through the slideshow on a touchscreen device

Steps for resolving the error message: "An appropriate loader is required to handle this file type, but there are no loaders currently configured to process it."

JavaScript: Launching the current page in a new tab or window

Submitting a form triggers the process of uploading images to Firebase

Using vue.js to pass route parameters to a component

Applying ng-class to the active button

Leverage a custom server (such as NestJS) within NextJS to dynamically render targeted pages

What is the most effective way to display multiple variables simultaneously in Mongoose/Node.js?

When conducting tests using Selenium and the headless Google Chrome browser in Java, the dynamic JS content fails to load

Arrange the list by first names in the array using Ionic 3

communication flow in two directions between server and client

"Modify hyperlink attributes to enhance security and optimize user experience

Creating an HTML list based on a hierarchical MySQL table structure

Obtaining the result from within the .then() block

Creating interactive navigation bar effects with scroll and click functionality using jQuery

Switching on Closed Captions for HTML5 video while deactivating the standard video controls