使用Angular动态添加表单输入

Question

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

第一页：

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用作后端（因此我将在其中保存“第一页”的输入）。 任何帮助或示例如何做到这一点将不胜感激！

Answer 1

一个典型的非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": {
    "answers": {
      "a1": {
        "enables": "B"
        "picked": false
      },
      "a2": {
        "enables": "C"
        "picked": false
      }
    }
  },
  "b": {
    "answers": {
      "b1": {
        "enables": ""
        "picked": false
      },
      "b2": {
        "enables": ""
        "picked": false
      }
    }
  },
  "C": {
    "answers": {
      "c1": {
        "enables": ""
        "picked": false
      },
      "c2": {
        "enables": ""
        "picked": false
      }
    }
  }
}

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

棘手的部分是根据用户输入的内容来设置survey.a.answers.a1.picked的值。 尚不确定该怎么做！