angularjs multi-step/wizard 폼을 한 페이지/url로 하는 방법

angularjs multi-step/wizard 폼을 한 페이지/url로 하는 방법

Angular에서 합리적인 방법을 찾고 있어요여러 단계(예: 마법사)로 구성되지만 하나의 페이지/URL에 연결된 함수를 만들기 위한 JS입니다.한 단계의 데이터는 다음 단계로 데이터를 전송(또는 공유)해야 합니다.

요점은 다음과 같습니다.

• URL은 동일하게 유지해야 합니다(즉,http://mydomain/myapp/nameupdater)의 모든 스텝에 대해서,
• 데이터는 단계 간에 전송될 수 있습니다(즉, 단계 2에서 데이터를 채우려면 단계 1에서 찾은 데이터를 제공해야 합니다).

예를 들어, 이름을 일괄 갱신하는 기능이 있다고 가정합니다.

• 1단계에서는 이름을 검색할 수 있습니다.
• 2단계에서는 1단계에서 발견된 이름 목록을 표시하여 사용자가 편집할 수 있도록 합니다.

저는 각 단계마다 고유한 뷰와 컨트롤러가 있는 접근 방식을 시작했습니다.그리고...angular-ui-router기능 상태를 유지했습니다.그런데 어떻게 해야 할 지 모르겠어요.

multi-step/wizard 형식을 angularjs로 설정하는 좋은 방법을 알고 있는 사람이 있습니까?

내 플런커 코드는 내가 이것을 시도하기 위한 아주 약한 코드이다.

이렇게 하는 가장 좋은 방법은ng-switch컨트롤러 1개, 루트 1개, 새로고침 없음.모든 스텝에서 공유되는 변수를 다음과 같이 사용합니다.

<div ng-controller="stepCtrl">
   <div ng-switch="step">
      <div ng-switch-when="1">
         <!-- here you can include your step 1 template,
              or simply just hardcode it here: -->
         <div ng-include src="'.../step1.html'">
         <button ng-click="setStep(1)"></button>
      </div>
      <div ng-switch-when="2">

         <div ng-include src="'.../step2.html'">
         <button ng-click="setStep(2)"></button>
      </div>
      <div ng-switch-when="3">
         <div ng-include src="'.../step3.html'">
         <button ng-click="setStep(3)"></button>
      </div>
   </div>
</div>

     yourApp.controller('stepCtrl',function($scope){
        $scope.step = 1;
        $scope.setStep = function(step){
           $scope.step = step;
        }
      });

이 방법으로 URL을 조작하여 현재 위치 끝에 단계를 추가할 수도 있습니다.

갱신:

사실 이 답변은 오래전에 나온 것입니다.요즘은 개인적으로 AngularJs 어플리케이션에 삽입하여 네스트된 뷰로 더욱 쿨하게 만들 수 있는 훌륭한 모듈인 UI-router를 사용하고 싶습니다.네스트된 뷰에 대해서 말하자면, 아래는 애니메이션이 있는 멀티 스텝 폼에 대한 저의 새로운 접근법입니다.

첫 번째:

Using $stateProvider declare any steps you want in separate views : 

 app.config(function($stateProvider, $urlRouterProvider) {

$stateProvider

    .state('wizard', {// this will be the wrapper for our wizard
        url: '/wizard',
        templateUrl: 'wizard.html',
        controller: 'wizardController'
    })
    .state('wizard.stepOne', {// this will be the wrapper for our wizard
        url: '/stepOne',
        templateUrl: 'stepOne.html',
        controller: 'wizardController'
    })
    .state('wizard.stepTwo', {// this will be the wrapper for our wizard
        url: '/stepTwo',
        templateUrl: 'stepTwo.html',
        controller: 'wizardController'
    })

그 후 "wizard.html"에서 다음과 같은 기능을 사용할 수 있습니다.

    <div id="container">

    <div>
        <h2>Our multistep form wizard</h2>


        <div id="status-buttons" class="text-center">
            <a ui-sref-active="active" ui-sref=".stepOne"><span>1</span> Step One</a>
            <a ui-sref-active="active" ui-sref=".stepTwo"><span>2</span> Step Two </a>

        </div>
    </div>
   <!-- Here we specify our view that is a container for our subviews(steps) , which in our case can be a form !-->

    <form id="signup-form" ng-submit="submit()">
        <!-- nested state views will be inserted here -->
        <div  ui-view></div>
    </form>

</div>

또, 순서상, 다른 HTML 파일이 필요합니다.이 방법으로, 우리는 여전히 하나의 컨트롤러를 가지고 있습니다, url은 갱신될 것입니다, 그리고 우리는 또한 각도 애니메이션을 추가할 수 있습니다.

언급URL : https://stackoverflow.com/questions/24224851/how-to-do-an-angularjs-multi-step-wizard-form-on-one-page-url