在 AngularJS 应用程序中，当向服务器提交表单并等待响应时，可以使用一些技术来禁用表单中的所有输入控件。这可以防止用户在等待响应时进行其他更改，从而避免错误和混淆。
使用 ng-disabled 指令
AngularJS 提供了一个方便的指令 ng-disabled，它可以用于禁用任何表单元素，例如文本框、按钮和下拉列表。通过将 ng-disabled 属性绑定到一个布尔值上，可以根据需要动态地启用或禁用元素。
例如，在以下 HTML 中，我们有一个名为 myForm 的表单，并且带有一个“提交”按钮。当用户点击“提交”按钮时，我们将在 $scope.submitForm() 函数中发送表单数据到服务器，并将 isSubmitting 变量设置为 true，表示正在等待服务器响应。
----- ------------- ------------------------- ---- ---- --- ------ ----------- --------------------------- ---- ---- --- ------- ------------- -------------------------------------- -------
此时，我们需要将 isSubmitting 变量设置为 false，以使表单重新变为可用状态。为了实现这一点，我们可以使用一个 .finally() 块，在服务器响应之后进行清理工作。
----------------- - ---------- -
------------------- - -----
------------------------------ ----------------
------------------------ -
-- ------
--
---------------------- -
-- ------
--
------------------- -
------------------- - ------
---
-使用 ng-model-options 指令
在某些情况下，我们可能需要在用户输入期间禁用表单控件，而不是在提交表单到服务器期间禁用。例如，我们可能需要等待某些数据从服务器加载，然后才能启用表单元素。
在这种情况下，可以使用 ng-model-options 指令来配置表单模型的更新行为。其中一个选项是 updateOn，它允许您指定控件事件（例如 blur、default 或 submit），从而控制何时触发模型更新。
例如，在以下 HTML 中，我们有一个名为 myForm 的表单，并且带有一个文本框和一个下拉列表。我们希望在加载数据时禁用这些控件，因此将 ng-model-options 属性设置为 { updateOn: 'submit' }，以便只有在提交表单时才更新模型。
----- --------------
---- --- ---
------ ----------- ------------------------
------------------- --------- -------- --
------------------------
---- ---- ---
------- -------------------------
------------------- --------- -------- --
------------------ --- - -- ------ ----- -- -------
------------------------
------- -----------------------
---------
---- ---- ---
------- ------------- -----------------------------------
-------在控制器中，我们可以设置一个 isLoading 变量来表示数据是否正在加载。在加载完成之前，我们将 isLoading 设置为 true，以禁用表单控件。
---------------- - -----
------------------------
------------------------ -
------------- - --------------
--
------------------- -
---------------- - ------
---使用 CSS 样式表
如果您只需要禁用一组相关
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/25118