数据结构
网络
RDBMS
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究如何使用 AngularJS 禁用按钮？
在本文中，我们将学习如何使用 AngularJS 和 “ng-disabled” 指令禁用 HTML 按钮元素。
禁用按钮在需要对某些输入字段进行验证的表单中很有用。例如，一个需要姓名和电子邮件的表单，在提供这些必填字段的值之前，理想情况下不应该启用提交按钮。在这种情况下，我们可以动态地禁用和启用按钮以达到预期的效果。
在这里，我们将使用 “ng-disabled” Angular 指令来禁用按钮。该指令接受一个表达式，该表达式返回一个布尔值，用于确定按钮是启用还是禁用。
语法
<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 按钮元素，分别使用 2 个单独的按钮来启用和禁用按钮。
文件名：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>
结论
在本文中，我们学习了如何使用 AngularJS 和 “ng-disabled” 指令动态禁用 HTML 按钮元素。在第一个例子中，我们动态地禁用了按钮，方法是在单击该按钮时禁用它。在第二个例子中，我们有两个按钮来动态地启用和禁用一个按钮。在第三个例子中，我们禁用了按钮，直到所有必填字段都填写完毕。
更新于： 2023年8月2日
2K+ 浏览量
广告