0

後のページのコンテンツがフォームの最初のページの入力によって動的に決定される複数ページのフォームを作成したいと考えています。これが私がやろうとしていることです:

先頭ページ：

1) どの会社を利用していますか? (1 つ選択)
- 会社オプション 1
- 会社オプション 2
- 会社オプション 3
- 会社オプション 4

2) どのサービスを使用していますか?
- サービス オプション 1
- サービス オプション 2
- サービス オプション 3
- サービス オプション 1 & 2
- サービス オプション 1 & 3
- サービス オプション 2 $ 3
- サービス オプション 1、2 & 3

2 ページ目は、基本的に 1 と 2 で選んだものに基づいてコンテンツを作成したいと考えています。たとえば、企業オプション 2 とサービス オプション 3 を選択した場合、次のページにそれらの選択肢に対応する質問のリストが表示されます。ユーザーが会社オプション 4 とサービス オプション 1、2、および 3 を選択した場合は、別の質問セットになります。

$routeProvider を使用するのがよいと思いますが、よくわかりません。補足として、私はバックエンドとして Firebase を使用しています (最初のページの入力を保存する場所です)。これを行う方法についてのヘルプや例をいただければ幸いです。

4

1 に答える 1

0

Angular 以外の典型的なアプリは、次のように動作します。

  1. ユーザーが選択する
  2. ユーザーが「次のページ」ボタンを押す
  3. ユーザーの選択は、同期リクエストを介してサーバーに送信されます
  4. サーバーは選択肢をDBに保存し、ユーザーに次に表示する選択肢を決定するロジックを実行し、正しい選択肢を含むページを提供します

Angular を使用すると、フローは次のようになります。

  1. ユーザーが選択する
  2. ユーザーが「次のページ」ボタンを押す
  3. アプリは、ユーザーが行った選択を確認し、ユーザーに次に表示する選択を決定するロジックを実行し、現在のページの選択を含む DOM の部分を非表示にし、正しい選択を含む DOM の一部を表示します (次のページが表示されているような錯覚)
  4. 調査が完了すると、ユーザーは [保存] ボタンをクリックし、非同期リクエストを介してすべての選択肢をサーバーに送信します。
  5. サーバーは選択肢をDBに保存します

このフローは微調整できます (たとえば、ユーザーが行った選択を保存するための中間ステップを追加するなど) が、大きな違いは、表示する選択肢を決定するロジックがクライアント上に存在することです。

$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 が含まれるようにします。たとえば、2 番目の質問を囲む div には ng-show = "survey.a.answers.a1.picked" が含まれます。

ユーザーの入力内容に応じて survey.a.answers.a1.picked の値を設定するのは難しい部分です。その方法はまだわかりません！

于 2013-10-16T00:06:30.733 に答える