1. @{
  2.     Layout = null;
  3. }
  4.  
  5. <!DOCTYPE html>
  6.  
  7. <html>
  8. <head>
  9.     <meta name="viewport" content="width=device-width" />
  10.     <title>AngularJS事件指令</title>
  11.     <script type="text/javascript" src="~/Scripts/angular.js"></script>
  12. </head>
  13. <body>
  14.     <h1>AngularJS事件指令</h1>
  15.     <div ng-app="myApp">
  16.         <div ng-controller="firstController">
  17.             <div ng-click="run()">点击</div>
  18.  
  19.             <input type="checkbox" ng-model="sel" />
  20.             <select>
  21.                 <option>111</option>
  22.                 <option ng-selected="sel">222</option>
  23.             </select>
  24.  
  25.             <p>
  26.                 <input type="checkbox" ng-change="change()" ng-model="c" />
  27.             </p>
  28.  
  29.             <p>
  30.                 <input type="text" value="你好" ng-copy="aaa='按下复制键的时候执行的事件'" />{{aaa}}
  31.             </p>
  32.             <p>
  33.                 <input type="text" value="你好" ng-cut="bbb='按下剪切键的时候执行的事件'" />{{bbb}}
  34.             </p>
  35.             <p>
  36.                 <input type="text" value="你好" ng-paste="ccc='按下粘贴键的时候执行的事件'" />{{ccc}}
  37.             </p>
  38.  
  39.             <p>
  40.                 <div ng-bind="text"></div>
  41.  
  42.                 <div ng-cloak></div>
  43.                 {{text}}
  44.                 <div ng-non-bindable>
  45.                     {{text}} @*n {{text}}就会原样输出*@
  46.                 </div>
  47.             </p>
  48.  
  49.         </div>
  50.     </div>
  51.     <script type="text/javascript">
  52.         //ng-bind 和ng-cloak 都是为了防止页面闪烁
  53.  
  54.         var app = angular.module("myApp", []);
  55.         app.controller("firstController", function ($scope) {
  56.             $scope.text = "PhoneGap中文网";
  57.             $scope.run = function () {
  58.                 alert("On-Click");
  59.             },
  60.             $scope.change = function () {
  61.                 if ($scope.c) {
  62.                     alert("改变");
  63.                 } else {
  64.                     alert($scope.c);
  65.                 }
  66.  
  67.             }
  68.         });
  69.     </script>
  70. </body>
  71. </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. 初学Java ssh之Spring 第三篇

    在这篇中,我学习了依赖注入的两种方式:设值注入和构造注入. 在我们以前的思维中,如果调用一个类时,我们都需要将其手动实例化,当我们创建被调用的工作不需要我们完成时,这就是控制反转,当这个将被调用的实例 ...

  2. kvc/kvo复习

    kvc/kvo复习 1 小问题 '[<XMGPerson 0x7fb8a8f30220> setValue:forUndefinedKey:]: this XMGPerson * pers ...

  3. iOS_SN_CocoaPods使用详细说明( 转)

    一.概要 iOS开发时,项目中会引用许多第三方库,CocoaPods(https://github.com/CocoaPods/CocoaPods)可以用来方便的统一管理这些第三方库. 二.安装 由于 ...

  4. 你好，C++（6）2.3 C++兵器谱

    2.3  C++兵器谱 正所谓“工欲善其事,必先利其器”,而要想做好C++程序设计,自然也离不开几件像样的兵器.下面我们就来看看C++兵器谱上有哪些神兵利器值得我们学习掌握.排在兵器谱上首要位置的就是 ...

  5. JavaScript键盘事件全面控制代码

    JavaScript键盘事件全面控制,它可以捕获键盘事件的输入状态,可以判断你敲打了键盘的那个键,ctrl.shift,26个字母等等,返回具体键盘值. <html> <head&g ...

  6. C语言基础学习基本数据类型-变量的输出与输入

    变量的输出 变量如何输入输出呢?实际上,在这之前你已经使用过输出语句(printf语句)了,我们可以使用printf来执行输出. printf语句的使用方法如下: printf(格式控制字符串, 数据 ...

  7. 错误日志类C#

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.W ...

  8. Qt在Windows下的三种编程环境搭建

    尊重作者,支持原创,如需转载,请附上原地址:http://blog.csdn.net/libaineu2004/article/details/17363165 从QT官网可以得知其支持的平台.编译器 ...

  9. 程序错误[C/C++]

    对于初学者而言,一般意义上,程序错误可以分为两类,逻辑错误和非逻辑错误.前者是指,程序可以通过编译或链接但运行时不符合预期结果,后者是程序不能通过编译或链接. 乍一看这样的分类非常清楚.不过,当引入语 ...

  10. VC的话有必要认真听，但却不用急着照办

    本文来自著名风险投资人 Fred Wilson 的博客 AVC,他在 2016 年 8 月 23 日的这篇文章<Understanding VCs>里用简单的语言揭秘了 VC(风险投资人) ...