本文主要介绍 AngularJS html DOM 基础知识,这里整理了相关资料和示例代码进行详解,有需要的小伙伴可以参考下
AngularJS 诞生于 Google 是一款优秀的前端 JS 框架,已经被用于 Google 的多款产品当中。AngularJS 有着诸多特性,最为核心的是:MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入,等等。
以下指令可用于应用程序数据绑定到 HTML DOM 元素的属性。
S.No. | 名称 | 描述 |
---|---|---|
1 | ng-disabled | 禁用一个给定的控制 |
2 | ng-show | 显示一个给定的控制 |
3 | ng-hide | 隐藏在给定的控制 |
4 | ng-click | 表示 AngularJS click 事件 |
ng-disabled 指令
添加 ng-disabled 属性到一个 HTML 按钮,通过它的模型。该模型绑定到复选框,看看以下变化。
- <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 按钮并更新模型。模型绑定 HTML 看看结合的变化。
- <p>
- Total click: {{ clickCounter }}
- </p>
- </td>
- <button ng-click="clickCounter = clickCounter + 1">
- Click Me!
- </button>
例子
下面的例子将展示上述所有指令。
testAngularJS.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="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js">
- </script>
- </body>
- </html>
输出
在 web 浏览器打开 textAngularJS.html,看到以下结果:
来源: http://www.phperz.com/article/17/0329/263540.html