结帐步骤导航答案

【问题标题】：Checkout Step Navigation结帐步骤导航
【发布时间】：2016-03-18 07:02:17
【问题描述】：

我不知道如何解决这个问题。我有 4 个结帐步骤。每个步骤都有一个要填写的表格。如果表单有效，则应激活导航中的下一步。

这是路由脚本

"use strict";

var router = angular.module("router", ["ui.router"]);
router.config(["$stateProvider", "$urlRouterProvider", "$locationProvider", "$httpProvider",
  function($stateProvider, $urlRouterProvider, $locationProvider, $httpProvider) {
    $locationProvider.html5Mode({
      enabled: true,
      requireBase: true,
      rewriteLinks: true
    });

    $stateProvider
      .state("step1", {
        url: "/step1",
        controller: "Step1Controller",
        templateUrl: "app/views/step1-partial.html"
      })
      .state("step2", {
        url: "/step2",
        controller: "Step2Controller",
        templateUrl: "app/views/step2-partial.html"
      })
      .state("step3", {
        url: "/step3",
        controller: "Step3Controller",
        templateUrl: "app/views/step3-partial.html"
      })
      .state("step4", {
        url: "/step4",
        controller: "Step4Controller",
        templateUrl: "app/views/step4-partial.html"
      });
      $urlRouterProvider.otherwise("/step1");
  }
]);

router.run(function($rootScope, $state, $stateParams) {
  $rootScope.$state = $state;
  $rootScope.$stateParams = $stateParams;
});

这是部分视图之一

<section class="steps">
  <ul class="clear-list">
    <li class="active"><a href="#">Step1</a></li>
    <li><a href="#">Step2</a></i></li>
    <li><a href="#">Step3</a></li>
    <li><a href="#">Step4</a></li>
  </ul>
</section>

<form name="registerForm" ng-cloak>
  formfields...
</form>

<div class="step-footer">
  <a href="#" ng-class="{'disable-link' : registerForm.$invalid}" ng-click="processData()" class="step-button right">Next ></a>
</div>

谁能帮帮我

【问题讨论】：

标签： angularjs angularjs-directive angular-ui-router

【解决方案1】：

在 processData() 函数中（我希望你将在所有三个控制器中都有）在成功处理数据后你可以做$location.path('/step2'); 等等所有步骤。

为了激活你当前所在的当前部分，你可以在所有三个控制器中都有一些公共变量，并分别设置该变量的值，如 ($scope.currentStep = step1)。示例。

<section class="steps">
  <ul class="clear-list">
    <li ng-class="{active : currentStep=='step1'}"><a href="#">Step1</a></li>
    <li ng-class="{active : currentStep=='step2'}"><a href="#">Step2</a></i></li>
    <li ng-class="{active : currentStep=='step3'}"><a href="#">Step3</a></li>
    <li ng-class="{active : currentStep=='step4'}"><a href="#">Step4</a></li>
  </ul>
</section>

【讨论】：

好的，这适用于。但我对此还有一个问题。我想扩展它以具有以下行为。如果“step1”已满，则“step2”被激活，我可以点击它。当我在“step2”时，“step1”也应该处于活动状态。当“step2”满档时，我进入“step3”，“step1”、“step2”处于活动状态，
@magic.77 在这种情况下，您可以拥有一个数组。 isCompleted = [true, false, false, false] 如果您在第 2 步并替换为 ng-class="{active: isCompleted[0]}" 等等。在每个控制器中相应地设置此数组。

【解决方案2】：

使用ui-sref-active="active" 代替class

【讨论】：