Creating form inputs in Angular with dynamic functionality

I am looking to design a multi-page form that adjusts its content based on the selections made by users on the initial page. Here is my plan:

Page One:

1) Which company do you prefer? (select one)
- Option 1
- Option 2
- Option 3
- Option 4

2) Which services are of interest to you?
- Option 1
- Option 2
- Option 3
- Option 1 & 2
- Option 1 & 3
- Option 2 $ 3
- Option 1, 2 & 3

On the following page, I aim to tailor the content based on the choices from questions #1 and #2. For instance, if a user selects Option 2 for the company and Option 3 for the service, the next page will display relevant questions related to those selections. Alternatively, if someone chooses Option 4 for the company and Options 1, 2, & 3 for services, a different set of questions will be presented.

I am considering utilizing $routeProvider for this functionality but would appreciate any guidance or examples on how to accomplish this. Additionally, I am using Firebase as my backend to store the data collected from the first page. Thank you in advance!

javascriptangularjs

Answer №1

In a traditional non-Angular application, the process usually goes like this:

  1. User selects options
  2. User clicks "next page" button
  3. User's choices are sent to the server synchronously
  4. Server stores choices in database, runs some logic to determine which choices to display next, and serves a page with the updated choices

With Angular, the flow is slightly different:

  1. User makes selections
  2. User clicks "next page" button
  3. Your app analyzes user's choices, determines next set of choices, updates DOM to show correct choices while hiding current ones (giving impression of moving to next page)
  4. Once survey is complete, user hits "Save" button triggering an asynchronous request to send all choices to server
  5. Server saves choices to database

You can customize this flow by adding steps like saving choices as users make them, but key difference lies in client-side logic for showing choices.

Your question on $routeProvider suggests interest in allowing users to resume unfinished surveys. Is that your goal? Or do you seek insight into displaying choices based on prior selections?

UPDATE

Consider questions(answers): A(a1, a2), B(b1, b2), and C(c1, c2). Choosing a1 unlocks question B, while selecting a2 unlocks question C.

Essential step is setting up model correctly:

scope.survey = {
  "A": {
    "answers": {
      "a1": {
        "enables": "B"
        "selected": false
      },
      "a2": {
        "enables": "C"
        "selected": false
      }
    }
  },
  "b": {
    "answers": {
      "b1": {
        "enables": ""
        "selected": false
      },
      "b2": {
        "enables": ""
        "selected": false
      }
    }
  },
  "C": {
    "answers": {
      "c1": {
        "enables": ""
        "selected": false
      },
      "c2": {
        "enables": ""
        "selected": false
      }
    }
  }
}

Then structure your HTML questions with ng-show applying to corresponding "selected" property. For instance, div enclosing second question would have ng-show = "survey.a.answers.a1.selected".

Assigning value to survey.a.answers.a1.selected based on user input poses challenge. Solutions to handle remain uncertain!

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

Looking to restrict the data retrieved from an API while utilizing ReactJS

I am currently fetching transaction data from an API. One of the fields in the response is buyer, which may sometimes be null. As a result, I am excluding any entries with a null buyer. This leads to varying numbers of results being displayed. My goal is t ...

javascriptreactjsnext.js

Strategies for Iterating Through Array Elements Multiple Times

When I want to log the numbers one to five just once, I usually use code like this: var array = [1,2,3,4,5] function loop(n) { for (var i=0;i<n;i++) { console.log(array[i]) } } loop(5) However, if I want to log the numbers one to five multip ...

javascriptarraysloopsfor-loop

Managing ng-repeat loops

HTML : <div ng-repeat="data in $ctrl.list"> <div ng-init="$ctrl.applyAction(data)"> <h4>{{data.name}}</h4> <ul ng-if="data.steps"> <li ng-repeat="step in data.steps">{{step.name}}</li ...

angularjsangularjs-ng-repeatangularjs-ng-init

Guidance on displaying values from one PHP file in another PHP file

Is it possible to achieve this scenario? I have two files, named main.php and submenu.php. In main.php, I have the main menu defined as follows: In another file called submenu.php, I have a list structured like this: <ul> <li>1</li> &l ...

phpjavascripthtmlcss

Halting the execution of a jQuery function when a condition is true

Currently in the process of building a website for my new brand, I am faced with a challenge while working with jQuery for the first time. Specifically, I am encountering issues related to the state of a specific div. The code contains if statements that ...

javascriptjqueryhtml

Combining an array with nested arrays

I have a complex array structure that I need to simplify [ { "entity": { "id": "2387232d-5fc4-4344-b71b-42f70ff16040", "pid": "bdba6327-4055-42db-8f2e-34c595a6f79f", "name&q ...

javascriptjqueryarrays

The async and await functions do not necessarily wait for one another

I am working with Typescript and have the following code: import sql = require("mssql"); const config: sql.config = {.... } const connect = async() => { return new Promise((resolve, reject) => { new sql.ConnectionPool(config).connect((e ...

javascripttypescriptpromisees6-promise

Exceedingly High Outputs from the Haversine Formula

I am currently utilizing the Haversine formula in order to compute the distance between two specific points on the earth's surface. Below is the code snippet I am using: var app = angular.module('app', []); app.controller('firstCtr ...

javascriptangularjsgeolocationcoordinateshaversine

Restricting the input field in jQuery to only accept the maximum value based on the

There are two input fields: discountType and discountAmount. My goal is to set restrictions based on the value of discountType: if it's percentage, the discountAmount input should only accept numbers between 0 and 100; if it's absolute, any numbe ...

javascriptjquery

Adding a gradient to enhance an SVG chart

Hey there! I'm currently experimenting with Plotly to create some awesome charts, and I've been trying to figure out how to give my area-charts a gradient instead of the usual fill with opacity. This is how I typically build my graph: Plotly.ne ...

javascripthtmlcsssvggradient

Utilizing Node.js to retrieve streams in conjunction with OpenAI

I am currently working on setting up a node/react setup to stream results from openai. I came across an example project that accomplishes this using next.js. While I have successfully made the API call and received the results as expected, the challenge li ...

javascriptnode.jsreactjsexpressopenai-api

Issues with the functionality of async actions in Redux

My app has an async action that is not functioning correctly. I suspect the issue lies in the mapDispatchToProps. Here is the current mapDispatchToProps code snippet: const mapDispatchToProps = (dispatch) => { return { fetchUserList: ( ...

javascriptreactjsreact-redux

Storing data from PHP in Local Storage using JavaScript variable

When a specific build name is clicked, the inner HTML content is captured and assigned to a JavaScript variable called loadDump. This variable is then sent over to PHP via an AJAX request. $.ajax({ url:"http://custom-assembly.tcad.co.uk/wp-content/t ...

javascriptphpajax

Tips for displaying a map of items only when they are present

I am facing an issue where I need to iterate over an object in my React app to display some data. Everything works well when the object contains items, but when it's empty (undefined) before fetching data from the server, it breaks the component. I am ...

javascriptreactjsimmutable.js

There was an issue encountered while trying to install Firebase with the command `npm install -g

I am attempting to utilize firebase-cloud-messaging with Javascript. For this purpose, I am referring to the repository: https://github.com/firebase/quickstart-js/tree/master/messaging As per the instructions in the Get Started section, I tried running t ...

javascriptnode.jsnpmfirebase-tools

Is Javascript capable of providing automatic authentication?

Our web application involves accessing a network camera stream, which is secured with a password for the 'root' account. When we try to connect to the camera through the web page, a login prompt appears. We are in need of an automated authentica ...

javascripthttpweb-applicationswebhttp-authentication

<use> - SVG: Circles with different stroke properties

Why is the stroke of both <use> elements being ignored here? The stroke color of <circle> is set to blue, which is also appearing on both <use> elements. Why? I am trying to set different stroke colors for all three of these elements, bu ...

javascripthtmlcsssvg

How to bypass CORS restrictions in XMLHttpRequest by manipulating HTTP headers?

Currently experimenting with the (deprecated) Twitter API 1.0 For instance, I am interested in retrieving data from the API utilizing AJAX browser requests on cross-origin web pages. This could be a new tab, a local HTML file, or any established website. ...

javascriptajaxhttp-headerscross-domaincors

Methods for retrieving object values

My challenge lies in extracting specific values such as 'default_image', 'label', or 'html' from an array of objects using a loop. Despite my efforts, I am unable to achieve this. var panel_array = [{ "Panel":{ "P ...

javascriptjqueryarraysobject

Conflicts between Bootstrap Validator and Ajax.BeginForm in Partial Views of MVC

My current issue involves using Ajax.BeginForm to post data on a form without refreshing the entire page. The goal is to validate a textbox - if it has a value, then the data should be posted; otherwise, a validation message should be displayed. However, I ...

javascriptjqueryajaxasp.net-mvctwitter-bootstrap