如何使用 AngularJS 禁用按钮?
angularjsweb developmentfront end technology
在本文中，我们将学习如何借助"ng-disabled"angularJS 指令，使用 AngularJS 禁用按钮 HTML 元素。
禁用按钮在表单某些输入字段需要验证的情况下非常有用。例如，如果表单要求输入姓名和电子邮件地址，则理想情况下不应该启用提交按钮，直到这些必填字段获得值为止。在这种情况下，我们可以动态地禁用和启用按钮，以实现所需的结果。
在这里，我们将使用"ng-disabled"angularJS 指令来禁用按钮。该指令接受一个表达式，该表达式返回一个布尔值，用于确定按钮是启用还是禁用。
语法
<button ng-disabled="expression">Button</button>
在上述语法中，"表达式"返回一个布尔值。
让我们通过一些示例来理解这一点 -
示例 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>
总结
在本文中，我们学习了如何借助"ng-disabled"angularJS 指令，使用 angularJS 动态禁用 HTML 按钮元素。在第一个示例中，我们在点击按钮时动态禁用该按钮。在第二个示例中，我们有两个按钮，分别用于动态启用和禁用按钮。在第三个示例中，我们禁用按钮，直到所有必填字段都填写完毕。
