@{

    Layout = null;

}

<!DOCTYPE html>

<html>

<head>

    <meta name="viewport" content="width=device-width" />

    <title>AngularJS事件指令</title>

    <script type="text/javascript" src="~/Scripts/angular.js"></script>

</head>

<body>

    <h1>AngularJS事件指令</h1>

    <div ng-app="myApp">

        <div ng-controller="firstController">

            <div ng-click="run()">点击</div>

            <input type="checkbox" ng-model="sel" />

            <select>

                <option>111</option>

                <option ng-selected="sel">222</option>

            </select>

            <p>

                <input type="checkbox" ng-change="change()" ng-model="c" />

            </p>

            <p>

                <input type="text" value="你好" ng-copy="aaa='按下复制键的时候执行的事件'" />{{aaa}}

            </p>

            <p>

                <input type="text" value="你好" ng-cut="bbb='按下剪切键的时候执行的事件'" />{{bbb}}

            </p>

            <p>

                <input type="text" value="你好" ng-paste="ccc='按下粘贴键的时候执行的事件'" />{{ccc}}

            </p>

            <p>

                <div ng-bind="text"></div>

                <div ng-cloak></div>

                {{text}}

                <div ng-non-bindable>

                    {{text}} @*n {{text}}就会原样输出*@

                </div>

            </p>

        </div>

    </div>

    <script type="text/javascript">

        //ng-bind 和ng-cloak 都是为了防止页面闪烁

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

        app.controller("firstController", function ($scope) {

            $scope.text = "PhoneGap中文网";

            $scope.run = function () {

                alert("On-Click");

            },

            $scope.change = function () {

                if ($scope.c) {

                    alert("改变");

                } else {

                    alert($scope.c);

                }

            }

        });

    </script>

</body>

</html>

　　

AngularJs练习Demo3的更多相关文章

  1. angularJS学习笔记二

    angularJS四个特性 1.MVC <!doctype html> <html ng-app> <head> <meta charset="ut ...

  2. AngularJS的简单入门

    AngularJS诞生于2009年,由Misko Hevery等人创建,后为Google所收购.是一款优秀的前端JS框架,已经被用于Google的多款产品当中.AngularJS有着诸多特性,最为核心 ...

  3. AngularJS+ThinkPHP实例教程

    总体思路 thinkphp通过RESTful方式提供数据给angular,前端(包括模板页面)全部由angular来接管. 示例 实现一个用户管理模块,走通增删改查4个操作,通过该示例,演示如何在th ...

  4. angularJS入门小Demo【简单测试js代码的方法】

    1.首先建立一个文件夹 demo, 2.在其中建立一个文本文档,改名为 demo-1.html, 3.把html中要引入的 js 文件拷贝到 demo目录下, 4.然后用 Notepadd++ 编辑刚 ...

  5. 项目二:品优购 第二天 AngularJS使用 brand商品页面的增删改查

    品优购电商系统开发 第2章 品牌管理 传智播客.黑马程序员 1.前端框架AngularJS入门 1.1 AngularJS简介 AngularJS  诞生于2009年,由Misko Hevery 等人 ...

  6. AngularJS - 入门小Demo

    AngularJS四大特效 MVC模式.模块化设计.自动化双向数据绑定.依赖注入 如果了解了后端开发知识,想必对这些词汇不会陌生,AngularJS融合了后端开发的一些思想,虽然身为前端框架,但与jQ ...

  7. angularjs $scope与this的区别，controller as vm有何含义？

     壹 ❀ 引 初学angularjs的同学对于$scope一定不会陌生,scope(作用域)是将view(视图)与model(模板)关联起来的桥梁,通过controller(控制器)对于model的数 ...

  8. AngularJS入门Demo

    1 :表达式 <html> <head> <title>入门小Demo-1</title> <script src="angular.m ...

  9. 通过AngularJS实现前端与后台的数据对接（二）——服务（service，$http）篇

    什么是服务? 服务提供了一种能在应用的整个生命周期内保持数据的方法,它能够在控制器之间进行通信,并且能保证数据的一致性. 服务是一个单例对象,在每个应用中只会被实例化一次(被$injector实例化) ...

随机推荐

  1. 【nodejs学习】1.文件操作

    1.小文件拷贝,使用nodejs内置模块 var fs = require('fs'); function copy(src, dst){ fs.writeFileSync(dst, fs.readF ...

  2. MySQL 5.6 root密码丢失，使用mysqld --skip-grant-tables

    MySQL 5.6 root密码丢失,(window平台)使用mysqld –skip-grant-tables启动MySQL服务,出现警告: 1 [Warning] TIMESTAMP with i ...

  3. Quick Sort In-place Implementation

    在线运行PHP http://www.compileonline.com/execute_php_online.php <?php function swap( &$a, &$b ...

  4. ARM 之FIQ(快速中断) IRQ（中断）

    IRQ,FIQ定义:  这就是个普通中断,当我们程序定义了该中断,并且在程序运行的时候产生了IRQ中断,则此时的芯片是这样运行的------中断处理器吧利用IRQ请求线来高速ARM,ARM就知道有个I ...

  5. Swift中数组集合-b

    数组(Array)是一串有序的由相同类型元素构成的集合.数组中的集合元素是有序的,可以重复出现. 声明一个Array类型的时候可以使用下面的语句之一. var studentList1:Array&l ...

  6. 最牛B的编码套路 【转】

    原文:http://blog.csdn.net/happydeer/article/details/17023229 最近,我大量阅读了Steve Yegge的文章.其中有一篇叫“Practicing ...

  7. TVS和一般的稳压二极管有什么区别

    电压及电流的瞬态干扰是造成电子电路及设备损坏的主要原因,常给人们带来无法估量的损失.这些干扰通常来自于电力设备的起停操作.交流电网的不稳定.雷击干扰及静电放电等,瞬态干扰几乎无处不在.无时不有,使人感 ...

  8. altium designer14的Import wizard 为空的解决方法

    1.首先将安装盘放到光驱里面,如果是虚拟光驱安装,请运行iso文件. 2. 点击DXP-->>Externtion and updates 3. 出现下列界面,选择右面的configure ...

  9. leetcode_question_112 Path Sum

    Given a binary tree and a sum, determine if the tree has a root-to-leaf path such that adding up all ...

  10. Activity切换效果（overridePendingTransition）

    在Android开发过程中,经常会碰到Activity之间的切换效果的问题,下面介绍一下如何实现左右滑动的切换效果,首先了解一下Activity切换的实现,从Android2.0开始在Activity ...