使用 Angular 动态添加表单输入

Dynamically add form inputs using Angular

本文关键字：表单 输入 添加 动态 Angular 使用      更新时间：2023-09-26

我想创建一个多页表单，其中后面页面的内容由表单第一页上的输入动态确定。这是我正在尝试做的：

第一页：

1） 您使用哪家公司？（选择 1）
- 公司选项1
- 公司选项2
- 公司选项3
- 公司选项4

2） 您使用哪些服务？
- 服务选项 1
- 服务选项 2
- 服务选项 3
- 服务选项 1 和 2
- 服务选项 1 和 3
- 服务选项 2 $ 3
- 服务选项 1，2 和 3

对于第二页，我基本上想根据他们在#1和#2中选择的内容来制作内容。例如，如果他们选择"公司选项2"和服务"选项3，我将在下一页上列出与这些选项相对应的问题列表。如果用户选择公司选项4和服务选项1，2和3，这将是一组不同的问题。

我怀疑使用$routeProvider可能是要走的路，但我不确定。作为旁注，我使用 Firebase 作为我的后端（所以这是我保存第一页输入的地方）。有关如何执行此操作的任何帮助或示例将不胜感激！

一个典型的、非 Angular 的应用程序可能会像这样工作：

  1. 用户做出选择
  2. 用户点击"下一页"按钮
  3. 用户的选择通过同步请求发送到服务器
  4. 服务器将选项保存到数据库，执行一些逻辑来确定接下来要向用户显示哪些选项，并为页面提供正确的选择

使用 Angular，您的流将更像这样：

  1. 用户做出选择
  2. 用户点击"下一页"按钮
  3. 您的应用查看用户所做的选择，执行一些逻辑来确定接下来要向用户显示哪些选择，隐藏包含当前页面选择的 DOM 部分，并显示包含正确选择的 DOM 部分（创建显示下一页的错觉）
  4. 调查完成后，用户点击"保存"按钮，通过异步请求将所有选择发送到服务器
  5. 服务器将选项保存到数据库

您可以调整此流程（例如，添加中间步骤以在用户做出选择时保存选择），但最大的区别在于，确定要显示哪些选择的逻辑存在于客户端上。

您关于$routeProvider的问题使我认为您可能有兴趣允许用户恢复未完成的调查。 是吗？ 还是您只对基于先前选择显示不同选择背后的逻辑感兴趣？

编辑

假设您有问题（答案）：A（a1，a2），B（b1，b2）和C（c1，c2）。答案 a1 将启用问题 B，答案 a2 将启用问题 C。

最重要的事情是正确设置模型：

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

然后设置您的 HTML 问题，以便每个问题都有一个指向正确"picked"属性的 ng-show。 例如，包含第二个问题的div 将具有 ng-show = "survey.a.answers.a1.picked"。

根据用户所做的输入来设置survey.a.answers.a1.pick的值是棘手的部分。 还不知道该怎么做！

相关文章：