AngularJS 中的事件详解

(编辑：jimmy 日期: 2025/9/30 浏览：2)

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">

运行效果：

0
隐藏 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里调用函数时,函数名带括号和不带括号的区别