web-dev-qa-db-ja.com

AngularJS：送信とサーバー応答の間のすべてのフォームコントロールを無効にする

ユーザーが[保存]ボタンまたは[送信]ボタンの並べ替えをクリックしたときにフォームコントロールを無効にする（または少なくともユーザー操作で使用できないようにする）場合の最善の（そして正しい）アプローチについてのジレンマがありますそして、データがネットワーク上を移動します。 JQuery（これは悪!!!）を使用し、すべての要素を配列として（クラスまたは属性マーカーで）クエリしたくないこれまでのアイデアは次のとおりです。

  • 「data-sent」と「data-processed」の2つの通知をサブスクライブするcm-form-controlカスタムディレクティブですべての要素をマークします。次に、カスタムコードが2番目の通知をプッシュするか、約束を解決します。
  • ng-show="loadingTracker.active()"のような非常に愚かなコードを生成するように強制するpromiseTrackerを使用してください（残念ながら！）。明らかに、すべての要素にng-disabledがあるわけではなく、「ダンス」ボタンを避けるためにng-hide/showを使用したくありません。
  • 弾丸をかみながらJQueryを使用する

誰かがより良いアイデアを持っていますか？前もって感謝します！

UPDATED：フィールドセットのアイデアは機能します。まだ同じことをしたい人のためのシンプルなフィドルがあります http://jsfiddle.net/YoMan78/pnQFQ/13/

HTML：

<div ng-app="myApp">
    <ng-form ng-controller="myCtrl">
        Saving: {{isSaving}}
        <fieldset ng-disabled="isSaving">
            <input type="text" ng-model="btnVal"/>
            <input type="button" ng-model="btnVal" value="{{btnVal}}"/>
            <button ng-click="save()">Save Me Maybe</button>
        </fieldset>
    </ng-form>
</div>

およびJS：

var angModule = angular.module("myApp", []);

angModule.controller("myCtrl", function ($scope, $filter, $window, $timeout) {
    $scope.isSaving = undefined;
    $scope.btnVal = 'Yes';
    $scope.save = function()
    {
        $scope.isSaving = true;
        $timeout( function()
             {
                 $scope.isSaving = false;
                 alert( 'done');
             }, 10000);
    };
});
javascriptformsangularjssubmit
119
YoMan78

すべてのフィールドをfieldsetでラップし、次のようにngDisabledディレクティブを使用します。

<fieldset ng-disabled="isSaving"> ... inputs ...</fieldset>

フィールドセット内のすべての入力を自動的に無効にします。

次に、コントローラーで、$scope.isSavingをhttp呼び出しの前にtrueに設定し、その後にfalseに設定します。

277
Alexander Puchkov