資料結構
網路
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+ 瀏覽量
廣告