1

ng-formしたがって、ディレクティブを使用して次のステップへのリンクに依存します。しかし、現在のステップ以外の次のステップへのリンクが であることがわかりましたenabled。

そこで、フラグを使用するように変更しましたng-disabled。ここに私のコードがあります:

index.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>

app.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;
}

submit 関数に次のコード行を追加します。

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 に答える