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. Hexo + GitHub 搭建个人博客

    对于程序员来说,搭建和维护一个个人博客十分必要​,写博客既是对所学知识的整理和总结,同时也能向他人展现自己的学习成果.这篇教程就是基于 Hexo 和 GitHub 来搭建属于自己的个人博客,简单快捷, ...

  2. July 03rd. 2018, Week 27th. Tuesday

    I don't know anything with certainty, but seeing the stars makes me dream. 我不知道世间有什么事是确定不变的,但只要一看到星空 ...

  3. 博客系统typecho的安装与使用

    之前用过wordpress和emlog的博客系统,感觉上wordpress功能强大,插件多,而且也不局限博客网站,就是资源占用比较高,emlog比较简单,资源占用少,就是界面不太喜欢,功能相对也少了些 ...

  4. Android进阶之光-第1章-Android新特性-读书笔记

    第 1 章 Android 新特性 1.1 Android 5.0 新特性 1.1.1 Android 5.0 主要新特性 1. 全新的 Material Design 新风格 Material De ...

  5. springboot实现数据库中数据导出Excel功能

    [转载]原文地址:https://blog.csdn.net/wilson_m/article/details/79021458 功能介绍 网上查找了一堆的数据导出代码,可能是自己基础比较薄弱的原因还 ...

  6. Linux 使用 free 命令查看内存使用情况

    1.free 命令的选项 使用 free 命令查看服务器内存使用情况. free [-b|-k|-m|-g|-h] [-l] [-o] [-t] [-s delay] [-c count] [-V] ...

  7. .NetCore WebApi——Swagger简单配置

    在前后端分离的大环境下,API接口文档成为了前后端交流的一个重点.Swagger让开发人员摆脱了写接口文档的痛苦. 官方网址:https://swagger.io/ 在.Net Core WebApi ...

  8. GlideNewDemo【Glide4.7.1版本的简单使用以及圆角功能】

    版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 简单记录下Glide4.7.1版本的使用和实现圆角方案. 注意:关于详细使用请仔细阅读<官方指南>. 效果图 使用步骤 ...

  9. 知识小罐头07（tomcat8请求源码分析 下）

    感觉最近想偷懒了,哎,强迫自己也要写点东西,偷懒可是会上瘾的,嘿嘿!一有写博客的想法要赶紧行动起来,养成良好的习惯. ok,继续上一篇所说的一些东西,上一篇说到Connector包装了那两个对象,最后 ...

  10. ubuntu上配置nginx实现反向代理

    反向代理 反向代理(Reverse Proxy)方式是指以代理服务器来接受internet上的连接请求,然后将请求转发给内部网络上的服务器,并将从服务器上得到的结果返回给internet上请求连接的客 ...