AngularJS 中的事件详解  更新时间:2016年07月28日 09:27:46   投稿:lqh   本文主要介绍AngularJS 事件,这里整理了相关资料,比较详细的介绍了AngularJS的使用方法,有需要的小伙伴参考下 AngularJS 事件 AngularJS 有自己的 HTML 事件指令。 ng-click 指令 ng-click 指令定义了 AngularJS 点击事件。 AngularJS 实例 点我! {{ count }} 运行效果: 点我! 0 隐藏 HTML 元素 ng-hide 指令用于设置应用部分是否可见。 ng-hide=”true” 设置 HTML 元素不可见。 ng-hide=”false” 设置 HTML 元素可见。 AngularJS 实例 隐藏/显示 名: 姓: 姓名: {{firstName + ” ” + lastName}} 运行结果: 隐藏/显示 名:  姓:  姓名: John Doe 应用解析: 第一部分 personController与控制器章节类似。 应用有一个默认属性: $scope.myVar = false; ng-hide 指令设置 元素及两个输入域是否可见, 根据 myVar 的值 (true 或 false) 来设置是否可见。 toggle() 函数用于切换 myVar 变量的值(true 和 false)。 ng-hide=”true” 让元素 不可见。 显示 HTML 元素 ng-show 指令可用于设置应用中的一部分是否可见 。 ng-show=”false” 可以设置 HTML 元素 不可见。 ng-show=”true” 可以以设置 HTML 元素可见。 以下实例使用了 ng-show 指令: AngularJS 实例 隐藏/显示 名: 姓: 姓名: {{person.firstName + ” ” + person.lastName}} 运行结果: 隐藏/显示 名:  姓:  姓名: John Doe 以上就是对AngularJS 事件资料的整理,后续继续补充,有需要的朋友参考下。 您可能感兴趣的文章: Angularjs为ng-click事件传递参数 Angularjs 动态添加指令并绑定事件的方法 Angularjs中使用指令绑定点击事件的方法 angularjs实现下拉列表的选中事件示例 详解Angularjs 如何自定义Img的ng-load 事件 AngularJS实现给动态生成的元素绑定事件的方法 AngularJS中directive指令使用之事件绑定与指令交互用法示例 浅谈angularJS中的事件 Angularjs中的事件广播 —全面解析$broadcast,$emit,$on Angularjs 事件指令详细整理 AngularJS 事件 相关文章 AngularJS表单基本操作 这篇文章主要为大家详细介绍了AngularJS表单基本操作的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 2017-01-01 解决三元运算符 报错“SyntaxError: can””t assign to conditional expre 在本篇文章里小编给大家整理的是关于python三元运算符 报错“SyntaxError: can’t assign to conditional expression”的处理方法,需要的朋友们学习下。 2020-02-02 详解angular如何调用HTML字符串的方法 这篇文章主要介绍了详解angular如何调用HTML字符串的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2018-06-06 Angularjs在初始化未完毕时出现闪烁问题的解决方法分析 这篇文章主要介绍了Angularjs在初始化未完毕时出现闪烁问题的解决方法,结合实例形式分析了3种常用的闪烁问题解决方法,需要的朋友可以参考下 2016-08-08 如何利用AngularJS打造一款简单Web应用 如果大家希望在应用程序的创建工作中采取各类最佳实践,那么AngularJS也能够带来极大的助益。总而言之,这套框架的强大功能与特性永远不会让有着应用开发需求的朋友们失望 2015-12-12 Angular4学习笔记之准备和环境搭建项目 这篇文章主要介绍了Angular4学习笔记之准备和环境搭建项目,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 2017-08-08 AngularJS 打开新的标签页实现代码 本文通过实例代码给大家介绍了angularJS 打开新的标签页方法,代码简单易懂,非常不错,具有参考借鉴价值,需要的朋友参考下吧 2017-09-09 AngularJS基础 ng-if 指令用法 本文主要介绍了AngularJS ng-if 指令,在这里整理了一些ng-if 指令的基础资料,并有实例代码,有需要的同学可以参考下 2016-08-08 AngularJS中isolate scope的用法分析 这篇文章主要介绍了AngularJS中isolate scope的用法,结合实例形式分析了isolate scope的几种具体使用方式,需要的朋友可以参考下 2016-11-11 cnpm加速Angular项目创建的方法 这篇文章主要介绍了cnpm加速Angular项目创建的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2018-09-09 最新评论

AngularJS 事件

AngularJS 有自己的 HTML 事件指令。

ng-click 指令

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

AngularJS 实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

<div ng-app="myApp" ng-controller="myCtrl">

<button ng-click="count = count + 1">点我!</button>

<p>{{ count }}</p>

</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.count = 0;
});
</script>

</body>
</html>

运行效果:

0

隐藏 HTML 元素

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

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

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

AngularJS 实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

<div ng-app="myApp" ng-controller="personCtrl">

<button ng-click="toggle()">隐藏/显示</button>

<p ng-hide="myVar">
名: <input type=text ng-model="firstName"><br>
姓: <input type=text ng-model="lastName"><br><br>
姓名: {{firstName + " " + lastName}}
</p>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('personCtrl', function($scope) {
  $scope.firstName = "John";
  $scope.lastName = "Doe";
  $scope.myVar = false;
  $scope.toggle = function() {
    $scope.myVar = !$scope.myVar;
  }
});
</script>

</body>
</html>

运行结果:

名: 
姓: 

姓名: 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="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

<div ng-app="myApp" ng-controller="personCtrl">

<button ng-click="toggle()">隐藏/显示</button>

<p ng-show="myVar">
名: <input type=text ng-model="person.firstName"><br>
姓: <input type=text ng-model="person.lastName"><br><br>
姓名: {{person.firstName + " " + person.lastName}}
</p>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('personCtrl', function($scope) {
  $scope.person = {
    firstName: "John",
    lastName: "Doe"
  };
  $scope.myVar = true;
  $scope.toggle = function() {
    $scope.myVar = !$scope.myVar;
  };
});
</script>

</body>
</html>

运行结果:

名: 
姓: 

姓名: John Doe

以上就是对AngularJS 事件资料的整理,后续继续补充,有需要的朋友参考下。

您可能感兴趣的文章:

  • Angularjs为ng-click事件传递参数
  • Angularjs 动态添加指令并绑定事件的方法
  • Angularjs中使用指令绑定点击事件的方法
  • angularjs实现下拉列表的选中事件示例
  • 详解Angularjs 如何自定义Img的ng-load 事件
  • AngularJS实现给动态生成的元素绑定事件的方法
  • AngularJS中directive指令使用之事件绑定与指令交互用法示例
  • 浅谈angularJS中的事件
  • Angularjs中的事件广播 —全面解析$broadcast,$emit,$on
  • Angularjs 事件指令详细整理
张贴在3