[解決済み] AngularJS: 送信からサーバー応答までの間、すべてのフォームコントロールを無効にする。
2022-08-04 10:07:11
質問
私は、ユーザーが "Save" または "Submit" ボタンをクリックし、データがワイヤ上を移動する期間中に、フォーム コントロールを無効にする (または少なくともユーザーとの対話を不可能にする) 場合、何が最善の (および正しい) 方法であるかにジレンマを感じています。JQuery(これは邪道です!!)を使いたくないし、すべての要素を配列として(クラスまたは属性マーカーによって)クエリしたいのです。 私がこれまでに持っていたアイデアは、次のとおりです。
-
すべての要素に
cm-form-control
このディレクティブは2つの通知: "data-sent" と "data-processed" を受信するようにします。そして、カスタムコードは、2番目の通知をプッシュするか、プロミスを解決する責任を負います。 -
使用方法
promiseTracker
のような非常に愚かなコードを生成するために強制されます。ng-show="loadingTracker.active()"
. もちろん、すべての要素にng-disabled
を使用したくないのでng-hide/show
を使用して、"dancing" ボタンを回避することができます。 - 我慢して JQuery を使用します。
どなたか良いアイデアをお持ちではないでしょうか?事前にありがとうございます。
UPDATEしました。 フィールドセットのアイデアはうまくいきます。同じことをしたい人のために、簡単なフィドルがあります。 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);
};
});
どのように解決するのですか?
すべてのフィールドを フィールドセット で囲み ngDisabled ディレクティブをこのように使用します。
<fieldset ng-disabled="isSaving"> ... inputs ...</fieldset>
フィールドセット内のすべての入力を自動的に無効化します。
次にコントローラで
$scope.isSaving
を
true
をhttp呼び出しの前に、そして
false
の後になります。
関連
-
[解決済み] AngularJSでEnterキーを押したときにフォームを送信する
-
[解決済み】AngularJSのディレクティブスコープにおける「@」と「=」の違いは何ですか?
-
[解決済み】AngularJS 。observe メソッドと $watch メソッドの違い
-
[解決済み] jQueryでフォームの二重投稿を防止する
-
[解決済み] ジェスト あるクラスの特定のメソッドをモックする方法
-
[解決済み] reactのrender関数でdynamic hrefを作成するには?
-
[解決済み] TypeScriptプロジェクトで既存のC#クラス定義を再利用する方法
-
[解決済み] Node.jsのES6クラスをrequireで作る
-
[解決済み] JavaScriptの文字列プリミティブとStringオブジェクトの違いは何ですか?
-
[解決済み] JavaScriptデータフォーマット/プリティプリンタ
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] 上級者向けJavaScript。この関数はなぜ括弧でくくられるのですか?重複
-
[解決済み] ExtJS 4のイベントハンドリングについて
-
[解決済み] 文字列がすべて同じ部分文字列で構成されているかどうかを調べるにはどうすればよいですか?
-
[解決済み] なぜ "use strict "はパフォーマンスを10倍向上させるのか?
-
[解決済み] bootstrap のポップオーバーがすべての要素の上に表示されない
-
[解決済み] TypeScriptプロジェクトで既存のC#クラス定義を再利用する方法
-
[解決済み] モデルフェッチ時に1をtrueに、0をfalseに変換する方法
-
[解決済み] 各オブジェクトに?重複
-
[解決済み] Chromeのwebkitインスペクタで「Unsafe JavaScript attempt to access frame with URL...」というエラーが継続的に発生する。
-
[解決済み] Node.jsのES6クラスをrequireで作る