AngularJS 如何禁用按钮

在本文中，我们将学习如何使用AngularJS以及“ng-disabled”指令禁用按钮HTML元素。

禁用按钮在存在某些必填字段的表单验证时非常有用。例如，一个要求填写姓名和电子邮件的表单在这些必填字段没有提供值时，理想情况下应该禁用提交按钮。在这种情况下，我们可以动态地禁用和启用按钮来实现所需的结果。

在这里，我们将使用“ng-disabled”指令来禁用按钮。该指令接受一个表达式，该表达式返回一个布尔值以确定按钮是启用还是禁用。

语法

<button ng-disabled=”expression”>Button</button>

在上述语法中，“expression”返回一个布尔值。

让我们通过一些例子来理解：

示例1

在这个例子中，我们将在按钮点击时动态禁用一个按钮元素。

文件名：index.html

<html lang="en">
<head>
   <title>How to disable buttons using AngularJS?</title>
   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js"></script>
</head>
<body>
   <h3>How to disable buttons using AngularJS?</h3>

   <div ng-app="app">
      <div ng-controller="controller">
        <button id="btn-p" ng-disabled="isBtnDisabled" ng-click="disableBtn()">Enabled button</button>
      </div>
   </div>

   <script>
      const btn = document.getElementById("btn-p");
      const app = angular.module("app", []);

      app.controller("controller", function ( $scope) {$ scope.isBtnDisabled = false;

          $scope.disableBtn = function () {$ scope.isBtnDisabled = true;
            btn.textContent = "Disabled button";
         };
      });
   </script>
</body>
</html>

示例 2

在这个例子中，我们将动态地禁用和启用一个HTML按钮元素，并使用两个分别用于启用和禁用按钮的按钮。

文件名：index.html

<html lang="en">
<head>
   <title>How to disable buttons using AngularJS?</title>
   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js"></script>
</head>
<body>
   <h3>How to disable buttons using AngularJS?</h3>

   <div ng-app="app">
      <div ng-controller="controller">
         <button id="btn-p" ng-disabled="isBtnDisabled">Enabled button</button>
         <div style="display: flex; gap: 10px; margin-top: 10px">
            <button id="enable" ng-click="enableBtn()">Enable</button>
            <button id="disable" ng-click="disableBtn()">Disable</button>
         </div>
      </div>
   </div>

   <script>
      const btn = document.getElementById("btn-p");
      const app = angular.module("app", []);

      app.controller("controller", function ( $scope) {$ scope.isBtnDisabled = false;

          $scope.disableBtn = function () {$ scope.isBtnDisabled = true;
            btn.textContent = "Disabled button";
         };

          $scope.enableBtn = function () {$ scope.isBtnDisabled = false;
            btn.textContent = "Enabled button";
         };
      });
   </script>
</body>
</html>

示例 3

在这个示例中，我们将禁用一个按钮，直到表单中的所有必填字段都已填写。我们将使用“ng-disabled”指令，在必填字段有值之前禁用按钮。

文件名：index.html

<html lang="en">
<head>
   <title>How to disable buttons using AngularJS?</title>
   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js"></script>
</head>
<body>
   <h3>How to disable buttons using AngularJS?</h3>

   <div ng-app="app">
        <div ng-controller="controller">
           <form>
               <div>
                  <label for="name">Name:</label>
                  <input type="text" name="name" ng-model="name" required>
               </div>
               <div>
                  <label for="email">Email:</label>
                  <input type="email" name="email" ng-model="email" required>
               </div>
               <button id="submit" ng-disabled="!name || !email">Submit</button>
           </form>
        </div>
    </div>

    <script>
    const app = angular.module("app", []);

        app.controller("controller", function ( $scope) {$ scope.name = "";
          $scope.email = "";
        });
    </script>

</body>
</html>