1、AngularJS 事件

　　ng-click ( 适用标签 ：所有，触发事件：单击)；

　　ng-dblclick（ 适用标签 ：所有，触发事件：双击）；

　　ng-blur（适用标签 : a,input,select,textarea，触发事件：失去焦点）；

　　ng-focus（适用标签 : a,input,select,textarea，触发事件：获取焦点）；

　　ng-change（适用标签 : a,input,select,textarea，触发事件：model更新）；

　　ng-keydown（适用标签 : 所有，触发事件：键盘按键按下，要把$event传过去）；

　　ng-keyup（适用标签 :大部分用在input、textarea， 但适用所有标签，触发事件：键盘按键按下并松开，但要把$event 传过去）；

　　ng-keypress（同上）；

　　ng-mousedown（适用标签 : 所有，触发事件：鼠标按下，左右中间都会触发）；

　　ng-mouseup（适用标签 : a,input,select,textarea，触发事件：鼠标按下弹起，左右中间都会触发）；

　　ng-mouseenter（适用标签 :所有，触发事件：鼠标进入）；

　　ng-mouseleave（适用标签 :所有，触发事件：鼠标离开）；

　　ng-mousemove（适用标签 :所有，触发事件：鼠标移动）；

　　ng-mouseover（适用标签 :所有，触发事件：鼠标进入）；

2、AngularJS 实例

　　

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <script src="js/angular.min.js"></script>

</head>

<body>

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

        <!-- ng-click 指令 -->

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

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

        <button ng-click="toggle()">{{text}}</button>

        <p ng-hide="myVar">

            名:

            <input type="text" ng-model="firstName">

            <br> 姓名:

            <input type="text" ng-model="lastName">

            <br>

            <br> Full Name: {{firstName + " " + lastName}}

        </p>

    </div>

</body>

</html>

<script>

    var app = angular.module('myApp', []);

    app.controller('myCtrl', function ($scope) {

        $scope.firstName = "John";

        $scope.lastName = "Doe";

        $scope.flag = false;

        $scope.myVar = true;

        $scope.text = '点击可见';

        $scope.toggle = function(){

            $scope.myVar = !$scope.myVar;

            $scope.flag = !$scope.flag;

            $scope.text = $scope.flag ? '点击消失' : '点击可见';

        }

    });

</script>

　　

AngularJS学习之旅—AngularJS 事件(十四)的更多相关文章

  1. AngularJS学习之旅—AngularJS 模块(十五)

    一.AngularJS 模块 模块定义了一个应用程序. 模块是应用程序中不同部分的容器. 模块是应用控制器的容器. 控制器通常属于一个模块. 1.创建模块 通过 AngularJS 的 angular ...

  2. AngularJS学习之旅—AngularJS 控制器(六)

    1.AngularJS 控制器 AngularJS 应用程序被控制器控制. ng-controller 指令定义了应用程序控制器. 控制器是 JavaScript 对象,由标准的 JavaScript ...

  3. AngularJS学习之旅—AngularJS 指令(三)

    1.AngularJS 指令 AngularJS 通过被称为 指令 的新属性来扩展 HTML. AngularJS 通过内置的指令来为应用添加功能. AngularJS 允许你自定义指令.2.Angu ...

  4. AngularJS学习之旅—AngularJS 表达式(二)

    1.AngularJS 表达式 AngularJS 表达式写在双大括号内:{{ expression }}. AngularJS 表达式把数据绑定到 HTML,这与 ng-bind 指令有异曲同工之妙 ...

  5. AngularJS学习之旅—AngularJS 表单(十六)

    一.AngularJS 表单 AngularJS 表单是输入控件的集合. HTML 控件 以下 HTML input 元素被称为 HTML 控件: input 元素 select 元素 button ...

  6. AngularJS学习之旅—AngularJS Select(十)

    1.AngularJS Select(选择框) AngularJS 可以使用数组或对象创建一个下拉列表选项. ng-option:创建一个下拉列表,列表项通过对象和数组循环输出 eg: <div ...

  7. AngularJS学习之旅—AngularJS 模型(四)

    1.AngularJS ng-model 指令 1.ng-model 指令用于绑定应用程序数据到 HTML 控制器(input, select, textarea)的值. 2.ng-model 指令可 ...

  8. AngularJS学习之旅—AngularJS SQL(十二)

    一.使用 PHP 从 MySQL 中获取数据 <div ng-app="myApp" ng-controller="customersCtrl"> ...

  9. AngularJS学习之旅—AngularJS HTML DOM(十三)

    1.AngularJS HTML DOM AngularJS 为 HTML DOM 元素的属性提供了绑定应用数据的指令. ng-disabled 指令:ng-disabled 指令直接绑定应用程序数据 ...

随机推荐

  1. 兼容IE8浏览器移除class样式的方法

    项目中发现,IE8下不兼容JQ的removeClass和addClass,页面无效果 网上找了很多方法都没有效果,最终找到一个很好的笨方法 var div=document.getElementByI ...

  2. geodocker-geomesa安装指南

        最近研究geopyspark原本以为大数据研究能告一段落,因为...     开玩笑的,还要一起建设社会主义呢!! 背景     geotrellis作为一个处理遥感数据的框架,对于遥感数据支 ...

  3. 瑞芯微RKnanC芯片处理器介绍

    RKnanC是一种低成本.低功耗.高效率的数字多媒体芯片,它是基于ARM的低功耗处理器结构和硬件加速器.它是专为便携式音频产品应用,如MP3播放器等. RKnanC可以支持各种音频标准的解码,如MP3 ...

  4. python3 发生器 迭代器 内置函数 协程 哈哈我又回来啦

    唉 犯傻了,干了一件虽有一点点道理的事情,但是却完全没有效果,我是不是傻,浪费了这么多时间在一件不可能的事情上,果然效果比道理更重要... 被一些琐事耽搁几天,python的学习都给我停了,擦!不过一 ...

  5. 【安富莱STM32H7教程】第1章 初学STM32H7的准备工作

    完整教程下载地址:http://forum.armfly.com/forum.php?mod=viewthread&tid=86980 第1章   初学STM32H7的准备工作 俗话说万事开头 ...

  6. Java多线程系列(1)

    本章主要内容有: 1．线程进程的区别 2．线程的生命周期 3．Java内存模型 原子性,可见性及有序性 4．线程池及Java实现 1. 线程进程的区别 线程:程序运行的最小单位 进程:资源分配的最小单 ...

  7. C# 4.0 的 Visual Studio 2010 示例

    C# 4.0 的 Visual Studio 2010 示例 我们将 C# 示例分为两种不同的类别: 语言示例 LINQ 示例 语言示例 语言示例帮助您熟悉各种 C# 语言功能.这些示例包含在 Lan ...

  8. 为什么要重写 hashcode 和 equals 方法？

    引言 以前面试的时候被面试官问到过这样一个问题: 你有没有重写过 hashCode 方法? 心里想着我没事重写哪玩意干啥,能不写就不写.嘴上当然没敢这么说,只能略表遗憾的说抱歉,我没写过. 撇了面试官 ...

  9. rabbitmq实现向各服务广播消息

    广播fanout 主要是将一个消息,分发到绑定了它的队列上,而这些队列如消费者自己去建立和绑定! 对生产者是解耦的 生产者不需要关心消费者有多少,消费者如果需要这种消息,只需要把队列绑定到exchan ...

  10. node.js学习资料(2015-12)

    使用vscode开发,设置代码智能提示的方法,cd 项目目录,然后使用以下命令npm install tsd -gtsd install node express angular -ros 下载 Gi ...