1

angularjs および angularjs ブートストラップでマルチステップ フォームを作成しようとしています。

次のhtmlコード、現在のタブを検証して次のタブに移動する各ステップのボタンがあります。私が探しているのは、フォームが現在の状態「isStepClean(0)」で検証されていないときにtrueに設定される各タブの「無効」状態です。

class="disabled" を試し、属性として無効にしましたが、うまくいきませんでした。それを行う方法はありますか？

<tabs>
    <pane heading="1. Recipients" active="panes[0].active" disabled="panes[0].disabled">
        ....
        <input type="button" ng-disabled="isStepClean(0)" class="btn btn-info pull-right" ng-click="panes[1].active = true" name="" value="Next step" />
    </pane>
    <pane heading="2. Information" active="panes[1].active" disabled="panes[1].disabled">
         ....
         <input type="button" ng-disabled="isStepClean(1)" class="btn btn-info pull-right" ng-click="panes[2].active = true" name="" value="Next step" />
    </pane>
    <pane heading="3. Preview" active="panes[2].active" disabled="panes[2].disabled">
         ....
         <input type="button" ng-disabled="isStepClean(2)" class="btn btn-info pull-right" ng-click="panes[3].active = true" name="" value="Next step" />
    </pane>
</tabs>

私が持っているコントローラで：

$scope.panes = [
        {active:true},
        {active:false},
        {active:false},
        {active:false}
    ];
4

4 に答える 4

4

この変更は既に Angular-UI で行われていると、誰かが知らせてくれました。壊れた Angular-Bootstrap にはありませんが、Angular-UI のブートストラップ コンポーネントの一部です。うまくいけば、彼らはすぐに変更を同期します:

https://github.com/angular-ui/bootstrap/commit/2b78dd16abd7e09846fa484331b5c35ece6619a2

編集：理解するのに時間がかかったので、以前の回答。

現在、Angular-Bootstrap には組み込まれていませんが、次のようにライブラリを変更できます。

無効な属性をペインに追加します (以下の例は ng-repeat を使用していますが、例のように手動で追加できます)。

 <tabs>
     <pane ng-repeat="pane in panes" heading="{{pane.title}}" disabled="{{pane.disabled}}" active="pane.active">{{pane.content}}</pane>
 </tabs>

次に、外部テンプレートのこれらの手順を変更する方法を知っていると思います)ui-bootstrap-tpls.jsを使用する場合は、ファイルに次の変更を加えます)。ui-bootstrap.js

プロパティを検索$templateCache.put("template/tabs/tabs.html"...して追加します(適切なエスケープを使用):disabled:pane.disabledng-class

<div class="tabbable">
  <ul class="nav nav-tabs">
    <li ng-repeat="pane in panes" ng-class="{active:pane.selected, disabled:pane.disabled}">
      <a ng-click="select(pane)" href="">{{pane.heading}}</a>
    </li>
  </ul>
  <div class="tab-content" ng-transclude></div>
</div>

以下を検索し.directive('pane', ['$parse', function($parse) {て変更します。

scope:{
  heading:'@'
},

に：

scope:{
  heading:'@',
  disabled:'@'
},

ペイン配列に無効化を追加してテストします。

$scope.panes = [
        {active:true},
        {active:false, disabled:true},
        {active:false, disabled:true},
        {active:false}
    ];

次に、検証関数 (例: isStepClean()) を使用して、ペイン配列で無効に設定します。

注: これは要素disabledにクラスを適用するだけliです (つまり、これにより、要素が Twitter Bootstrapliのクラスに快適に見えるように変更されます)。disabledカスタムディレクティブとして、必要な無効化動作を追加できます。

于 2013-06-09T00:42:40.427 に答える
1

angular-ui タブセットを使用している場合、disabledの使用は非推奨です。代わりに無効にする必要があります。

<tabset>
    <tab heading='Tab Title' disable="hasErrors">
        ...
于 2016-06-02T13:46:41.713 に答える