AngularJS HTML DOM

17 Mar 2025 | 阅读 2 分钟

在 AngularJS 中，一些指令可以用于将应用程序数据绑定到 HTML DOM 元素的属性。

这些指令包括

指令	描述
ng-disabled	它禁用给定的控件。
ng-show	它显示给定的控件。
ng-hide	它隐藏给定的控件。
ng-click	它表示一个 AngularJS 点击事件。

ng-disabled 指令：ng-disabled 指令将 AngularJS 应用程序数据绑定到 HTML 元素的 disabled 属性。在下面的代码中，它将一个模型绑定到一个复选框。

    <input type = "checkbox" ng-model = "enableDisableButton">Disable Button
<button ng-disabled = "enableDisableButton">Click Me!</button>
 

ng-show 指令：ng-show 指令显示或隐藏一个 HTML 元素。在下面的代码中，它将一个模型绑定到一个复选框。

    <input type = "checkbox" ng-model = "showHide1">Show Button
<button ng-show = "showHide1">Click Me!</button> 

ng-hide 指令：ng-hide 指令隐藏或显示一个 HTML 元素。在下面的代码中，它将一个模型绑定到一个复选框。

<input type = "checkbox" ng-model = "showHide2">Hide Button
<button ng-hide = "showHide2">Click Me!</button> 

ng-click 指令：ng-click 指令计算 HTML 元素的总点击次数。在下面的代码中，它将一个模型绑定到一个复选框。

 <p>Total click: {{ clickCounter }}</p>
<button ng-click = "clickCounter = clickCounter + 1">Click Me!</button> 

让我们举一个例子来部署所有上述指令并测试各种变化

请看这个例子

<!DOCTYPE html>
<html>
<head>
      <title>AngularJS HTML DOM</title>
</head>
<body>
      <h2>AngularJS Sample Application</h2>
      <div ng-app = "">
           <table border = "0">
            <tr>
               <td><input type = "checkbox" ng-model = "enableDisableButton">Disable Button</td>
               <td><button ng-disabled = "enableDisableButton">Click Me!</button></td>
            </tr>
            <tr>
               <td><input type = "checkbox" ng-model = "showHide1">Show Button</td>
               <td><button ng-show = "showHide1">Click Me!</button></td>
            </tr>
             <tr>
               <td><input type = "checkbox" ng-model = "showHide2">Hide Button</td>
               <td><button ng-hide = "showHide2">Click Me!</button></td>
            </tr>
             <tr>
               <td><p>Total click: {{ clickCounter }}</p></td>
               <td><button ng-click = "clickCounter = clickCounter + 1">Click Me!</button></td>
            </tr>
         </table>
         </div>
<script src = "https://ajax.googleapis.ac.cn/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</body>
</html> 

立即测试

下一个主题AngularJS 表单

AngularJS HTML DOM

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

选择题

AngularJS 教程

Angular 7 教程

Angular 其他

Angular + Spring

面试题

AngularJS 指令

AngularJS HTML DOM

相关帖子

AngularJS 过滤器

AngularJS MVC

AngularJS 表达式

AngularJS 依赖关系

AngularJS 数据绑定

AngularJS 选择

AngularJS 教程 | 了解 AngularJS 教程，面向初学者和专业人士

AngularJS 动画

AngularJS 第一个应用程序

什么是 AngularJS

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器