@{

    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. cas+tomcat+shiro实现单点登录-2-部署cas server到tomcat

    目录 1.tomcat添加https安全协议 2.下载cas server端部署到tomcat上 3.CAS服务器深入配置(连接MYSQL) 4.Apache Shiro 集成Cas作为cas cli ...

  2. js引用类型姿势

    栈 1)var a=new Array(),a.push(a,b,...),a.pop() queue 1)var a=new Array(), a.push(a,b,...),a.shift() a ...

  3. java学习笔记 (1) —— Strut2.3.24环境搭建

    1.打开MyEclipse,添加WebProject,名称为testStruts2 2.配置Tomcat环境. 1) 在窗口——首选项——MyEclipse——Servers下找到Tomcat6.x ...

  4. C#邮件发送(最坑爹的邮箱-QQ邮箱)---转发（SmallFlyElephant）

    C#邮件发送(最坑爹的邮箱-QQ邮箱) 最近工作挺清闲的,有空的时候陪妹子出去玩玩,自己看看小说,看看电影,日子过的挺欢乐的,这个星期幡然悔悟,代码才是我的最爱,做点小东西,就写个邮件发送程序.说的邮 ...

  5. angular json转义html

    第一步json输出的内容反编码 function htmldecode(s){ var div = document.createElement('div'); div.innerHTML = s; ...

  6. 转载：Tomcat多数据源配置方法

    转载网址:http://blog.sina.com.cn/s/blog_53803b7b010144u5.html 关于在TOMCAT下配置多数据源,网上有很多方式,但是感觉也很混乱,俺只说俺们使用的 ...

  7. 二维指针*(void **)的研究（uC/OS-II案例） 《转载》

    uC/OS-II内存管理函数内最难理解的部分就是二维指针,本文以图文并茂的方式对二维指针进行了详细分析与讲解.看完本文,相信对C里面指针的概念又会有进一步的认识. 一.OSMemCreate( ) 函 ...

  8. 创建区域Areas，添加TagHelper

    创建区域Areas,添加TagHelper 目录索引 [无私分享:ASP.NET CORE 项目实战]目录索引 简介 在Asp.net Core VS2015中,我们发现还有很多不太简便的地方,比如右 ...

  9. [每日一题jQuery] jQuery选择器总结：进一步过滤、同级操作、后代操作

    jQuery选择器继承自CSS的风格,可以通过jQuery选择器找出特定的DOM元素,在此基础上对该元素做相应处理.jQuery不仅支持简单的标签选择器.类选择器.id选择器,还针对表单状态.子元素. ...

  10. 格式化用jad反编译混淆过的代码，能去大部分错误 (zhuanzai)

    http://blog.csdn.net/chruan/article/details/8484783