2016-08-02 8 views
0

私はあなたがすべてうまくいると信じています。いくつかの論理があります。私は助けが必要です、そして、私が概念をかなりうまく掴むのを助ける例があります。AngularJS Single View(複数形モード)

下記のようなサインアップビューがあります。 enter image description here

選択したボタンに応じて、サインフォームがモーダルで表示されます。広告主ボタンがクリックされると仮定すると、フォームは

enter image description here

下図のように見えますが、インフルエンサーのボタンのクリックは、別の社会的、サインアップして、この他のフォームを引き上げたり下に示したようウィザードにサインアップを形成すべきです。

enter image description here

上記二つの形態のいずれかは、フォームウィザードと結論ステップiは仮定いくつかのデータベースにフォームエントリの構文解析をもたらすはずです。

私が選択した条件に応じて、それぞれの選択肢を表示することができるように単一のビューが、選択的にこのすべてを持っていることを望みます。

それは上記とどのように私のロジックが構造化して実現する必要がありますを達成するためにどのように実現可能です。どういうわけか、私はパネル、対話、いくつかの機能を使わなくてはならないが、それをすべてまとめておく必要がある。 提供できるすべての援助を感謝します。

ありがとうございました。

+0

bodyタグであなたのルーティング

 var app = angular.module('demoapp', ['ui.router']); app.config(function ($stateProvider) { $stateProvider .state('sign_up', { url: '/sign_up', views: { loginContent: { templateUrl: 'app/sign_up/sign_up.html', controller: 'sign_upCtrl' } } }) .state('sign_up.firstPage', { url: '/sign_up-firstPage', views: { loginContent: { templateUrl: 'app/sign_up/firstPage.html', controller: 'firstPageController' } } }) .state('sign_up.secondPage', { url: '/sign_up-secondPage', views: { loginContent: { templateUrl: 'app/sign_up/secondPage.html', controller: 'secondPagePageController' } } }) }).run(function ($state){ $state.go('sign_up'); }); 

とのindex.htmlファイルでやっているapp.jsファイルを変更する必要があります単一のビュー内のページはちょうど、私はそれをすべてはあなたのアプリケーションのあなたのルーティングを管理しているか下に来るそうならば、あなたはその – Dhiraj

+0

間違っているなら、私を修正し対応するためのおかげで目的のボタンをクリックしたときに中央部分を交換します。 3つのフォームをすべて同じページにコーディングし、選択したフォームのみをビューにレンダリングし、それぞれのフォームの結果をバックエンドに渡したいと思います。 $ stateProviderは – Dhiraj

+0

こんにちはDhirajためstateProviderを$使用することができます – Selase

答えて

1

あなたはちょうどあなたが私を示すために、あなたの質問から理解して何

 <div ui-view="header"></div> 
     <div ui-view="loginContent"></div> 
     <div ui-view="footer"></div> 
+0

これは、フォームごとに別々のHTMLページをコーディングする必要があるということですか?すべてのフォームを1つのhtmlページに入れ、そのセクションを表示することは可能ですか?おそらく、選択に基づいて隠して表示しますか? – Selase

+0

私は、私が何を達成することができ、何ができないのか分からず混乱しているので、私は少し紛らわしいと思っていることを知っています。だから、私の考えは、それぞれのフォームのidを持つ単一のhtmlページを持つことです。フォームのセクションが選択されていることを示す選択基準に応じて表示されます。 ui.routerはそれを実現させることができますか? – Selase

+0

@Selase idを付けてフォームを表示したり表示したりするのは良い方法ではありません。 – Dhiraj

関連する問題