AngularJS Single View с несколькими формами модальных

Question

AngularJS Single View с несколькими формами модальных

0

Надеюсь, вы все в порядке. Есть немного логики, мне нужно помочь выяснить и пример, который поможет мне хорошо понять концепцию.

У меня есть вид регистрации, как показано ниже.

В зависимости от выбранной кнопки форма регистрации отображается в модальном формате. Предполагая, что нажата кнопка рекламодателя, форма выглядит как изображение ниже

Тем не менее, щелчок кнопки "влиятель" должен поднять эту другую форму с помощью альтернативной социальной регистрации или регистрации формы в мастере, как показано ниже.

Любая из двух форм, приведенных выше, является мастером формы, и заключительный шаг должен привести к анализу записей формы в некоторой базе данных, я полагаю.

Я хочу иметь все это на одном представлении, но выборочно, чтобы иметь возможность отображать соответствующий выбор в зависимости от выбранных критериев.

Насколько это возможно для достижения вышеуказанного и как должна быть построена и реализована моя логика. Я знаю, как-то мне придется использовать панель, диалоги и некоторые функции, но не могу собрать все это вместе. Полюбуйтесь каждой помощью, которая может быть предложена.

Благодарю.

Selase 02 авг. 2016, в 13:28

Источник

0

что я понимаю из твоего вопроса, чтобы показать страницы в единственном представлении, просто чтобы заменить среднюю часть на нужной кнопке, нажми меня, если я ошибаюсь
Dhiraj 02 авг. 2016, в 10:44
0

если это так, то все зависит от того, как вы управляете маршрутизацией приложения, для этого вы можете использовать $ stateProvider.
Dhiraj 02 авг. 2016, в 10:46
0

Привет Дирадж, спасибо за ответ. Я хочу закодировать все три формы на одной странице и отобразить только выбранную форму для представления, а также выбрать результаты из соответствующей формы в бэкэнд.
Selase 02 авг. 2016, в 10:58
0

в этом случае используйте стороннюю навигационную $ stateProvider вместо службы угловой маршрутизации по умолчанию ng-route, потому что $ stateProvider обеспечивает вложенную маршрутизацию
Dhiraj 02 авг. 2016, в 11:13
0

пожалуйста, проверьте мой ответ и внесите незначительные изменения в соответствии с вашим приложением
Dhiraj 02 авг. 2016, в 11:21
0

Я думаю, что вы должны создать модальный шаблон с условным фрагментом.
The Mechanic 02 авг. 2016, в 11:24
0

@TheMechanic Можно ли создать модальный шаблон с условным фрагментом из углового материала? и не могли бы вы направить меня на ресурс, который может мне помочь? Благодарю.
Selase 02 авг. 2016, в 16:01

Показать ещё 5 комментариев

Теги:

angularjs

angular-material

angularjs-directive

1 ответ

Ещё вопросы

что я понимаю из твоего вопроса, чтобы показать страницы в единственном представлении, просто чтобы заменить среднюю часть на нужной кнопке, нажми меня, если я ошибаюсь
если это так, то все зависит от того, как вы управляете маршрутизацией приложения, для этого вы можете использовать $ stateProvider.
Привет Дирадж, спасибо за ответ. Я хочу закодировать все три формы на одной странице и отобразить только выбранную форму для представления, а также выбрать результаты из соответствующей формы в бэкэнд.
в этом случае используйте стороннюю навигационную $ stateProvider вместо службы угловой маршрутизации по умолчанию ng-route, потому что $ stateProvider обеспечивает вложенную маршрутизацию
пожалуйста, проверьте мой ответ и внесите незначительные изменения в соответствии с вашим приложением
Я думаю, что вы должны создать модальный шаблон с условным фрагментом.
@TheMechanic Можно ли создать модальный шаблон с условным фрагментом из углового материала? и не могли бы вы направить меня на ресурс, который может мне помочь? Благодарю.

Dhiraj · Answer 1 · 2016-08-02T09-34-00.000Z

Вам просто нужно изменить файл app.js, где вы делаете свою маршрутизацию

                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 в теге body

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

это означает, что мне нужно кодировать отдельные HTML-страницы для каждой из форм? Можно ли иметь все формы на одной html-странице и просматривать их разделы? Возможно скрыть и показать на основе выбора?
Я знаю, что я спрашиваю, это немного сбивает с толку, и это потому, что я тоже сбит с толку, не зная, чего можно достичь, а что нет. Поэтому моя идея состоит в том, чтобы иметь одну отдельную HTML-страницу с идентификаторами для каждой из форм. затем в зависимости от критериев выбора этот раздел формы выбирается для показа. Может ли пользователь ui.router сделать это?
@ Selase Это не будет хорошей практикой, чтобы пойти с идентификаторами и на основе этого скрыть или показать ваши формы
@Selase Angular js обеспечивает наибольшее преимущество для рендеринга HTML-страниц на одной странице. Что уже показано в моем ответе
@ Dhiraj: я согласен и обязательно буду использовать ваши рекомендации. Мне просто было интересно, можно ли сделать это так, как я упоминал ранее, что вы посоветовали не считать хорошей практикой. Отметив это, я полагаю, мне придется создать HTML-страницу для каждого представления.
Также есть этот мастер форм, который я хочу реализовать из-за его угловатых свойств материала. Недостатком является то, что текстовые поля полностью отличаются от угловых стилей. Есть ли способ это исправить? что вызывает это и как вы решаете проблему. Вот плункер: plnkr.co/edit/rp5qJykW2DD1A7EvaVZP?p=preview
@ По возможности, вы можете задать отдельный вопрос для мастера форм, и мы узнаем вашу конкретную проблему более подробно, и мы можем помочь вам
Давайте продолжим эту дискуссию в чате .