0

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

第一页：

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 作为我的后端（所以我将在其中保存第一页的输入）。任何有关如何执行此操作的帮助或示例将不胜感激！

4

1 回答 1

0

一个典型的非 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 指向正确的“picked”属性。例如，包含第二个问题的 div 将具有 ng-show = "survey.a.answers.a1.picked"。

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

于 2013-10-16T00:06:30.733 回答