AngularJS 中的事件详解

网络编程发布日期：2024/10/3 浏览次数：1

正在浏览：AngularJS 中的事件详解

AngularJS 事件

AngularJS 有自己的 HTML 事件指令。

ng-click 指令

ng-click 指令定义了 AngularJS 点击事件。

AngularJS 实例

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="/UploadFiles/2021-04-02/angular.min.js">

运行效果：

隐藏 HTML 元素

ng-hide 指令用于设置应用部分是否可见。

ng-hide="true" 设置 HTML 元素不可见。

ng-hide="false" 设置 HTML 元素可见。

AngularJS 实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="/UploadFiles/2021-04-02/angular.min.js">

运行结果：

名: 

姓: 



姓名: John Doe
应用解析:


第一部分 personController与控制器章节类似。


应用有一个默认属性: $scope.myVar = false;


ng-hide 指令设置 <p>元素及两个输入域是否可见， 根据 myVar 的值 (true 或 false) 来设置是否可见。


toggle() 函数用于切换 myVar 变量的值（true 和 false）。


ng-hide="true" 让元素 不可见。


显示 HTML 元素


ng-show 指令可用于设置应用中的一部分是否可见 。


ng-show="false" 可以设置 HTML 元素 不可见。


ng-show="true" 可以以设置 HTML 元素可见。


以下实例使用了 ng-show 指令:


AngularJS 实例


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="/UploadFiles/2021-04-02/angular.min.js">

运行结果：

名: 

姓: 



姓名: John Doe
以上就是对AngularJS 事件资料的整理，后续继续补充，有需要的朋友参考下。

上一篇：jQuery制作网页版选项卡

下一篇：基于js里调用函数时,函数名带括号和不带括号的区别

一句话新闻

高通与谷歌联手！首款骁龙PC优化Chrome浏览器发布

高通和谷歌日前宣布，推出首次面向搭载骁龙的Windows PC的优化版Chrome浏览器。
在对骁龙X Elite参考设计的初步测试中，全新的Chrome浏览器在Speedometer 2.1基准测试中实现了显著的性能提升。
预计在2024年年中之前，搭载骁龙X Elite计算平台的PC将面世。该浏览器的提前问世，有助于骁龙PC问世就获得满血表现。
谷歌高级副总裁Hiroshi Lockheimer表示，此次与高通的合作将有助于确保Chrome用户在当前ARM兼容的PC上获得最佳的浏览体验。