Question

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

第一页：

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

2）您使用哪种服务？
- 服务选项1
- 服务选项2
- 服务选项3
- 服务选项1＆amp; 2
- 服务选项1＆amp; 3
- 服务选项2 $ 3
- 服务选项1,2＆amp; 3

对于第二页，我基本上希望将内容基于他们在＃1和＃2中选择的内容。例如，如果他们选择公司选项2和服务选项3，我会在下一页上找到与这些选项对应的问题列表。如果用户选择公司选项4和服务选项1,2＆amp ;;那么这将是一组不同的问题。 3。

我怀疑使用$ routeProvider可能是要走的路，但我不确定。作为旁注，我使用Firebase作为我的后端（这样我就可以保存第一页的输入）。任何帮助或如何做到这一点的例子将非常感谢！

Answer 1

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

用户做出选择
用户点击“下一页”按钮
用户的选择通过同步请求发送到服务器
服务器将选项保存到数据库，做一些逻辑以确定接下来向用户显示哪些选项，并为具有正确选择的页面提供服务

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

用户做出选择
用户点击“下一页”按钮
您的应用程序会查看用户做出的选择，确定下一步向用户显示哪些选项的逻辑，隐藏包含当前页面选择的DOM部分，并显示包含正确选项的DOM的一部分（创造显示下一页的错觉）
调查完成后，用户点击“保存”按钮，通过异步请求将所有选项发送到服务器
服务器将选项保存到数据库

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

关于$ 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，指向正确的“pick”属性。例如，包含第二个问题的div将包含ng-show =“survey.a.answers.a1.picked”。

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

使用Angular动态添加表单输入

1 个答案: