1

ng-form所以我依赖于使用指令下一步的链接。但我发现除了当前链接之外，接下来的步骤的另一个链接是enabled.

所以我将其更改为使用 flag for ng-disabled。这是我的代码：

索引.html

<div class="stepwizard-row setup-panel">
    <div class="stepwizard-step">
        <a ui-sref="step1" type="button" class="btn btn-primary btn-circle active-step-wizard">1</a>
    </div>
    <div class="stepwizard-step">
        <a ng-disabled="step1Form.$invalid;" ui-sref="step2" type="button" class="btn btn-primary btn-circle active-step-wizard">2</a>
    </div>
    <div class="stepwizard-step">
        <a ng-disabled="step2Disabled;" ui-sref="step3" type="button" class="btn btn-primary btn-circle active-step-wizard">3</a>
    </div>
    <div class="stepwizard-step">
        <a ng-disabled="step3Disabled;" ui-sref="step4" type="button" class="btn btn-primary btn-circle active-step-wizard">4</a>            
    </div>
    <div class="stepwizard-step">
        <a ng-disabled="step4Disabled;" ui-sref="step5" type="button" class="btn btn-primary btn-circle active-step-wizard">5</a>            
    </div>
    <div class="stepwizard-step">
        <a ng-disabled="step5Disabled;" ui-sref="step6" type="button" class="btn btn-primary btn-circle active-step-wizard">6</a>
    </div>
</div>

应用程序.js

$scope.step2Disabled = true;
$scope.step3Disabled = true;
$scope.step4Disabled = true;
$scope.step5Disabled = true;

但是只要当前步骤的表单验证有效，使用这种方法就不会enabled进行下一步。我该如何解决这个问题？谢谢

更新

我尝试这个解决方案：

测试1：

<div class="stepwizard-step">
  <a ng-disabled="step3Disabled;step3Form.$invalid;" ui-sref="step4" type="button" class="btn btn-primary btn-circle active-step-wizard">4</a>            
</div>

测试1结果：

它仅在我在当前步骤中ng-disabled有效，在表单验证有效时有效

测试2：

<div class="stepwizard-step">
  <a ng-disabled="step3Disabled || step3Form.$invalid;" ui-sref="step4" type="button" class="btn btn-primary btn-circle active-step-wizard">4</a>            
</div>

测试2结果：

当我在上一步时，此步骤的链接被完全禁用。但是当我在这一步并且表格有效时，下一步的链接仍然被禁用。

4

2 回答 2

0

您的控制器中应该有一个 $scope 变量：

$scope.currentStep = 0;
$scope.enableCount = 0;

那么你有一个功能

$scope.changeStep = function(index){
    $scope.currentStep = index;
}

在您的提交功能中，您添加这行代码：

if(form.$valid && $scope.enableCount <= $scope.currentStep) $scope.enableCount++;

然后在你的 html 中你应该这样做：

<div class="stepwizard-row setup-panel">
    <div class="stepwizard-step">
        <a ui-sref="step1" type="button" ng-click="changeStep(0)" class="btn btn-primary btn-circle active-step-wizard">1</a>
    </div>
    <div class="stepwizard-step">
        <a ng-disabled="enableCount < 1" ng-click="changeStep(1)" ui-sref="step2" type="button" class="btn btn-primary btn-circle active-step-wizard">2</a>
    </div>
    <div class="stepwizard-step">
        <a ng-disabled="enableCount < 2" ng-click="changeStep(2)" ui-sref="step3" type="button" class="btn btn-primary btn-circle active-step-wizard">3</a>
    </div>
    <div class="stepwizard-step">
        <a ng-disabled="enableCount < 3" ng-click="changeStep(3)" ui-sref="step4" type="button" class="btn btn-primary btn-circle active-step-wizard">4</a>            
    </div>
    <div class="stepwizard-step">
        <a ng-disabled="enableCount < 4" ng-click="changeStep(4)" ui-sref="step5" type="button" class="btn btn-primary btn-circle active-step-wizard">5</a>            
    </div>
    <div class="stepwizard-step">
        <a ng-disabled="enableCount < 5" ng-click="changeStep(5)" ui-sref="step6" type="button" class="btn btn-primary btn-circle active-step-wizard">6</a>
    </div>
</div>
于 2015-08-20T23:53:06.907 回答
0

您不能对整个表单进行验证。您需要检查每个输入是否存在 $invalid。也许您创建了一个函数或其他东西来检查表单的每个输入。

编辑：我回答错了对不起^^。所以这将是您问题的解决方案：https ://jsbin.com/sojejunazo/edit

于 2015-08-20T23:16:11.983 回答