Question

我在Angular 1上的UI-Router中创建了一个多步骤表单，而且我打了一个砖墙。

我将在scotch.io的UI路由器多步骤表单教程中使用此示例。

这是他们的index.html

<body ng-app="formApp">

    <div class="container">

        <!-- views will be injected here -->
        <div ui-view></div>

    </div>

</body>

哪个拉动了form.html和app.js

app.js

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

    $stateProvider

        // route to show our basic form (/form)
        .state('form', {
            url: '/form',
            templateUrl: 'form.html',
            controller: 'formController'
        })

        // nested states 
        // each of these sections will have their own view
        // url will be nested (/form/profile)
        .state('form.profile', {
            url: '/profile',
            templateUrl: 'form-profile.html'
        })

        // url will be /form/interests
        .state('form.interests', {
            url: '/interests',
            templateUrl: 'form-interests.html'
        })

        // url will be /form/payment
        .state('form.payment', {
            url: '/payment',
            templateUrl: 'form-payment.html'
        });

    // catch all route
    // send users to the form page 
    $urlRouterProvider.otherwise('/form/profile');
})

form.html

  <div class="page-header text-center">
      <h2>Let's Be Friends</h2>

      <!-- the links to our nested states using relative paths -->
      <!-- add the active class if the state matches our ui-sref -->
      <div id="status-buttons" class="text-center">
          <a ui-sref-active="active" ui-sref=".profile"><span>1</span> Profile</a>
          <a ui-sref-active="active" ui-sref=".interests"><span>2</span> Interests</a>
          <a ui-sref-active="active" ui-sref=".payment"><span>3</span> Payment</a>
      </div>
  </div>

  <!-- use ng-submit to catch the form submission and use our Angular function -->
  <form id="signup-form" ng-submit="processForm()">
      <!-- our nested state views will be injected here -->
      <div id="form-views" ui-view></div>
  </form>

此处有3种状态，

资料
兴趣
付款

一旦进入第1步，您就可以在第一页上看到任何步骤的所有链接。

我希望创建一个面包屑，你只能看到页面加载的第1步，然后是第2步和第1步，等等。

然而 - 问题在于，因为它是一个多步形式，我希望用户能够在X步骤之后返回步骤1并仍然看到面包屑中的1到X.

我目前解决最终目标的解决方案看起来像这样

<a ui-sref-active="active" ui-sref=".profile">1 Profile</a> <a ng-if="('form.payment' | isState) || ('form.interests' | isState) || (form | isState)" ui-sref-active="active" ui-sref=".interests">2 Interests</a> <a ng-if="('form.payment' | isState) || (form | isState)" ui-sref-active="active" ui-sref=".payment">3 Payment</a>

不完全优雅，但有效。

基本上，如果用户填写4个步骤并返回1，他们仍然应该看到＆＃34;面包屑＆＃34;中的所有4个步骤。（他们达到的最深层次）。

我正在考虑存储哪个是用户已达到的最远的状态，并根据该状态呈现链接数，但不太确定如何实现。

UI路由器＆＃34;面包屑＆＃34;用于多步骤形式AngularJS

0 个答案: