AngularJS事件

一.事件

1.ng-click

指令允许当一个元素被点击后执行指定的表达式。

 <input type="button" value="add-count" ng-click="count=count+1" ng-init="count=0;" />{{count}}

//鼠标单击事件，不用多说

2.ng-dblclick
ng-dblclick指令鼠标双击时

<input type="button" value="add-count" ng-dblclick="count=count+1" ng-init="count=0;" />{{count}}

//鼠标双击事件，无需解释。

3.ng-mousedown

指令用于告诉 AngularJS 鼠标在指定的 HTML 元素上按下时要执行的操作。
ng-mousedown 指令不会覆盖元素的原生 onmousedown 事件, 事件触发时，ng-mousedown 表达式与原生的 onmousedown 事件将都会执行。

<div ng-mousedown="count = count + 1" ng-init="count=0">点我!</div>
<h1>{{count}}</h1>

注意：鼠标点击执行的顺序:①Mousedown ②Mouseup ③Click

4.ng-mouseup
当在元素上松开鼠标按钮时的行为

5.ng-mouseenter

鼠标穿过元素时执行的表达式。

ng-mouseenter 指令不会覆盖元素的原生 onmouseenter 事件, 事件触发时，ng-mouseenter 表达式与原生的 onmouseenter 事件将都会执行。

6.ng-mouseleave

鼠标离开元素时的行为

ng-mouseleave 指令不会覆盖元素的原生 onmouseleave 事件, 事件触发时，ng-mouseleave 表达式与原生的 onmouseleave 事件将都会执行。

7.ng-mousemove

鼠标在元素上移动时执行的表达式。

ng-mouseover 指令不会覆盖元素的原生 onmouseover 事件, 事件触发时，ng-mouseover 表达式与原生的 onmouseover 事件将都会执行。

8.ng-mouseover

鼠标位于元素上方时的行为。

9.ng-keydown

按下按键执行的表达式。

ng-keydown 指令不会覆盖元素的原生 onkeydown 事件, 事件触发时，ng-keydown 表达式与原生的 onkeydown 事件将都会执行。

注意：<input>, <select>, <textarea>, 和其他可编辑元素支持该指令。

10.ng-keyup

指令用于告诉 AngularJS 在指定 HTML 元素上按键松开时需要的操作。
ng-keyup 指令不会覆盖元素的原生 onkeyup 事件, 事件触发时，ng-keyup 表达式与原生的 onkeyup 事件将都会执行。

<input ng-keyup="count = count + 1" ng-init="count=0" />
<h1>{{count}}</h1>

//该实例在输入框每次按键松开时，计算变量 "count" 会自动加 1。

注意：按键敲击的事件顺序:①Keydown ②Keypress ③Keyup


11.ng-keypress
这个告诉 AngularJS 在指定 HTML 元素上按下按键时需要的操作。
ng-keypress 指令不会覆盖元素的原生 onkeypress 事件, 事件触发时，ng-keypress 表达式与原生的 onkeypress 事件将都会执行。

<input ng-keypress="count = count + 1" ng-init="count=0" />
<h1>{{count}}</h1>
<p>该实例在输入框每次按下按键时，计算变量 "count" 会自动加 1。</p>

12.ng-change

元素值改变时执行表达式。

当用户更改输入时，执行给定的表达式。表达式是立即进行执行的，这个和javascript的onChange事件的只有在触发事件的变化结束的时候执行不同。

<div ng-app="Demo" ng-controller="testCtrl as ctrl">
  <input ng-change="ctrl.fn()" ng-model="ctrl.inputValue" />
</div>
(function () {
angular.module("Demo", [])
.controller("testCtrl", testCtrl);
function testCtrl() {
	this.fn = function () {
	  console.log(this.inputValue);
  };
};
}());

这个指令就是对输入的值做个监听，当发现值变化的时候，你需要让我做什么操作我就做什么操作咯。

13.ng-checked规定元素是否被选中

如果返回 true，将会选中元素选项。

eg:

 <input type="button" ng-click="isChecked = !isChecked" value="toggle" />
  <input type="checkbox" ng-checked="isChecked" />

//这个指令在做选择配置的时候挺有用的哦

14.隐藏 HTML 元素
ng-hide 指令用于设置应用部分是否可见。
ng-hide="true" 设置 HTML 元素不可见。
ng-hide="false" 设置 HTML 元素可见。

15.显示 HTML 元素
ng-show 指令可用于设置应用中的一部分是否可见 。
ng-show="false" 可以设置 HTML 元素 不可见。
ng-show="true" 可以以设置 HTML 元素可见。

查看更多