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 there a tool or software available that can securely encode a text file into an HTML file without the need for loading it using AJAX?

Calculate the total of all values associated with a dynamically generated key within an array of objects

Is there a way to turn off the pinch-to-zoom trackpad gesture or disable the Ctrl+wheel zoom function on a webpage

Evaluation of Google Closure Library's performance

Tips for adding a sequence of numbers to a database using Angular

jQuery deduct a value from a given value

Retrieve container for storing documents in JavaServer Pages

vee-validate remains consistent in its language settings

Determine the vertical dimension of an element through a JavaScript event listener

Clickable link in popup window using fancybox

What is the best way to trigger the keyup event in that moment?

Ensure that the loop is fully executed before proceeding with any additional code

Is there a way for me to update the button text and class to make it toggle-like

Submitting a form using Ajax that was generated with the help of jQuery

Necessary within a JavaScript Class

Experiencing a problem with my JavaScript code in Node.js due to an asynchronous issue arising when using a timeout

The UI components are failing to render properly, despite having the correct states defined

Harnessing the power of JSON within an HTML document to display dynamic data

Passing an empty JSON object through Ajax requests

Variable missing in the ExpressJs view