Question

我不知道如何解决这个问题。我有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>

有人能帮助我吗

Answer 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>

Answer 2

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

结帐步骤导航

2 个答案: