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. RxJava操作符的简单使用

    一.准备工作在app的build.gradle文件下的dependencies中添加依赖: compile 'io.reactivex:rxjava:1.3.0' compile 'io.reacti ...

  2. Android自动解析html带图片，实现图文混排

    在android中,如何将html代码转换为text,然后显示在textview中呢,有一个简单直接的方法: textView.setText(Html.fromHtml(content)); 然而用 ...

  3. Mysql使用中文字段排序的实现--order by

    在处理排序规则的时候,有时候我们会需要选择用一些中文字段来排序,实现我们在工作中的需求,下面是在处理排序的时候,适用的方式展示. SELECT t.lawcheckcolumnid AS id,t.c ...

  4. MySQL和SQLyog的配置-安装及遇到的问题

    1. 安装MySQL 我先是参考了菜鸟教程上的#Windows 上安装 MySQL #版块的安装教程,不过经历了种种磨难,我最后是按照#此篇博客#安装成功的. 这两篇教程最大的差别是在于下载的版本不同 ...

  5. REST API disable / enable service auto start by API

    how to disable service auto start by API as the following how to enable service auto start by API as ...

  6. 快速构建SPA框架SalutJS--项目工程目录 三

    配置文件 在开始我们的第一个界面之前,我们需要把初始的html和config文件配置好.html非常简单,只需要一个div作为最外部的容器包裹着所有界面即可: <!DOCTYPE html> ...

  7. kafka基础知识点

    1.安装: 1.1. 前置安装要求:java + zookeeper 1.2. 下载安装包:http://mirros.cnnic.cn/apache/kafka/0.9.00/kafka_2.10- ...

  8. Java地位被撼动？Java与JavaScript的趣事连载

    第一回 JavaScript的进攻 公元2014年,Java 第八代国王终于登上了王位. 第一次早朝,国王坐在高高的宝座上,看着毕恭毕敬的大臣,第一次体会到了皇权的威力. 德高望重的IO大臣颤悠悠地走 ...

  9. 一篇读懂HTTPS：加密原理、安全逻辑、数字证书等

    1.引言 HTTPS(全称: Hypertext Transfer Protocol Secure,超文本传输安全协议),是以安全为目标的HTTP通道,简单讲是HTTP的安全版.本文,就来深入介绍下其 ...

  10. 我的第一个MyBatis

    (1)步骤:1.新建实体类对象---根据数据库字段来设计,有多少字段设多少变量,变量名要字段名一致.   2.新建配置文件config.xml---主要用来获取数据源,里面内容大致需要填写:数据库驱动 ...