@{

    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. C++ 基本数据结构整理

    Hash Map (Unordered_map) Insert #include <unordered_map> using namespace std; unordered_map &l ...

  2. mysql索引之唯一索引

    mysql 的唯一索引一般用于不重复的字段,一般会把表中的id设为唯一索引,创建唯一索引的目的不是为了提高查询速度,而是为了避免数据重复,注意:唯一索引可以有多个,但是列值必须唯一,创建唯一索引使用关 ...

  3. JSONP的客户端的具体实现

    JSONP的客户端的具体实现 1.远程调用一个js,代码如下:         <script type="text/javascript">         var ...

  4. 网站UV，与IP、PV

    什么是网站UV,与IP.PV在概念上的区别? UV(独立访客):即Unique Visitor,访问您网站的一台电脑客户端为一个访客.00:00-24:00内相同的客户端只被计算一次. PV(访问量) ...

  5. mysql windows 下导入大文件

    先进入你的mysql bin目录 cd D:/php/mysql/bin 输入命令 mysql -u 用户名 -p 密码 数据库名 < 文件路径                          ...

  6. 响应式Asp.net MVC企业网站源码

    最近时间充裕,自己写了一个响应式MVC企业网站系统,用于回顾自己的MVC知识.网站源码后台和前台都采用响应式布局,可以适应不同的屏幕. 一.源码描述 响应式企业网站系统,前台和后台都采用了响应式布局, ...

  7. Android-4

    显式Intent 隐式Intent Intent过滤器相关选项 通过浏览器链接启动本地Activity

  8. mybatia的mypper.xml文件，参数类型为map,map里有一个键值对的值为数组，如何解析，例子可供参考，接上文，发现更简便的方法，不必传数组，只需传字符串用逗号隔开即可

    是这样的 先看参数 map.put("orgId", "1818"); map.put("childDeps", "1000,10 ...

  9. cs代码实现控件移动TranslateTransform

    xaml: <Rectangle> <Rectangle.RenderTransform> <TranslateTransform x:Name="myTran ...

  10. webservice的几个简单概念

    1.什么是JAX-WS? http://baike.baidu.com/view/1865210.htm?fr=aladdin 2.什么是JAX-RPC? http://baike.baidu.com ...