AngularJS 中的事件详解

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 事件资料的整理，后续继续补充，有需要的朋友参考下。

赞 (0)

相关推荐

  • 详解Angularjs 如何自定义Img的ng-load 事件

    在使用AngularJs的过程中,我们常常会用到一些ng-事件,如ng-click.ng-change等,这些事件都是AngularJs事先为我们定义好的.也有的情况下,我们会用到一些使用频率不高的dom事件,如img的onload(图片加载完成后触发),但AngularJs中默认没有这个事件,那么我们该如何自定义添加ng-load这个事件呢? 只需要给app对象添加如下指令即可: myApp.directive('imageonload', function () { return { res

  • Angularjs中的事件广播 —全面解析$broadcast,$emit,$on

    Angularjs中的事件广播 —全面解析$broadcast,$emit,$on

    Angularjs中不同作用域之间可以通过组合使用$broadcast,$emit,$on的事件广播机制来进行通信 介绍: $broadcast的作用是将事件从父级作用域传播至子级作用域,包括自己.格式如下:$broadcast(eventName,args) $emit的作用是将事件从子级作用域传播至父级作用域,包括自己,直至根作用域.格式如下:$emit(eventName,args) $on用于在作用域中监控从子级或父级作用域中传播的事件以及相应的数据.格式如下:$on(event,dat

  • 浅谈angularJS中的事件

    什么是事件 •如同浏览器响应浏览器层的事件,比如鼠标点击.获得焦点,angular应用也可以响应angular事件 •angular事件系统并不与浏览器的事件系统相通,我们只能在作用域上监听angular事件而不是DOM事件 事件传播 因为作用域是有层次的,所以我们可以在作用域链上传递事件: •使用$emit冒泡事件,事件从当前子作用域冒泡到赋作用域,在产生事件的作用域之上的所有作用域都会收到这个事件的通知 $emit()方法带有两个参数: name  要发出的事件的名称 args   一个参数

  • AngularJS中directive指令使用之事件绑定与指令交互用法示例

    本文实例讲述了AngularJS中directive指令使用之事件绑定与指令交互用法.分享给大家供大家参考,具体如下: AngularJS中模板的使用,事件绑定以及指令与指令之间的交互 <!doctype html> <html ng-app="myapp"> <head> <meta charset="utf-8"/> </head> <body ng-controller="Shield

  • angularjs实现下拉列表的选中事件示例

    angularjs实现下拉列表的选中事件示例

    select标签的对于大家来说很熟悉了,下面我来讲讲AngularJS中 对select的属性设置,做出选择某个下拉选项后控制其他标签的隐藏: <select style="height:31px; width:100px" id="rewardMethod"name="rewardMethod" class="status_select" ng-model="state"> <optio

  • Angularjs 动态添加指令并绑定事件的方法

    这两天学习了angularjs 感觉指令这个地方知识点挺多的,而且很重要,所以,今天添加一点小笔记. 先说使用场景,动态生成DOM元素并绑定事件,非常常见的一种场景,用jq实现效果: var count=0; $("#test").on("click",function(event){ if(event.target.tagName.toLowerCase()=="input") return; count++; var html="&

  • Angularjs中使用指令绑定点击事件的方法

    项目中,模板中的菜单是jQuery控制的,在Angularjs中就运行不到了,因为菜单项是ng-repeat之后的. 如html <ul id="main-menu"> <li class=""> <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external n

  • Angularjs 事件指令详细整理

    Angularjs 事件指令详细整理 ngClick 适用标签:所有 触发条件:单击 #html <div ng-controller="LearnCtrl"> <div ng-click="click()">click me</div> <button ng-click="click()">click me</button> </div> #script angular.m

  • Angularjs为ng-click事件传递参数

    Angularjs为ng-click事件传递参数

    在angularjs开发中,我们需要为ng-click事件传递一个参数. 在js中,可以接到参数: 演示:

  • AngularJS实现给动态生成的元素绑定事件的方法

    本文实例讲述了AngularJS实现给动态生成的元素绑定事件的方法.分享给大家供大家参考,具体如下: 1 . 我们知道在jQuery中,动态生成一个元素,如果要在动态生成元素的同时,动态绑定事件,可以通过live/on方法(在jquery3.0中已经废除了bind方法). 2 . 在AngularJS中,操作DOM一般在指令中完成,事件监听机制是在对于已经静态生成的dom绑定事件,而如果在指令中动态生成了DOM节点,动态生成的节点不会被JS事件监听. 举例来说: angular.module('

随机推荐