@{

    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#中的TCP通讯与UDP通讯

    最近做了一个项目,主要是给Unity3D和实时数据库做通讯接口.虽然方案一直在变:从开始的UDP通讯变为TCP通讯,然后再变化为UDP通讯;然后通讯的对象又发生改变,由与数据库的驱动进行通讯(主动推送 ...

  2. C# \\u8888类型的unicode转换为字符串方法

    1.双斜杠\\ 处理: 2.将编码分组,将编码转换为int,再转换为char. string sss = "\\u6c88\\u9633"; '; string[] arr = a ...

  3. Wireshark对ping报文的解码显示（BE与LE） 转自作者：易隐者

    Wireshark对ping报文的解码显示(BE与LE) 我们非常熟悉ping报文的封装结构,但是,在这个报文解码里,我们发现wireshark的解码多了几个参数:Identifier(BE).Ide ...

  4. 对于js原型和原型链继承的简单理解（第二种，对象冒充）

    关键代码    this.parent = Cat;    this.parent.apply(this); function Cat(){ this.climb = function(){ aler ...

  5. [Mugeda HTML5技术教程之3] Hello World: 第一个Mugeda动画

    今天我们开始我们的第一个Mugeda动画作品,并通过它来看看制作Mugeda动画的一些通用流程.在开始制作之前,请确保你已经拥有一个Mugeda网站的账号.如果还没有,你可以登录 www.mugeda ...

  6. jquery1.9学习笔记 之层级选择器(二)

    子孙选择器(“祖先 子孙”) 描述:选择所有给出祖先选择器的子孙选择器. 例子: 用蓝色虚线边框标记所有表单子孙元素的输入.表单里的输入框用黄色背景. <!doctype html>< ...

  7. js 当前系统时间

    <script language=Javascript> function time(){ //获得显示时间的div t_div = document.getElementById('sh ...

  8. shopnc B2B2C商城 Nginx下开启伪静态

    B2B2C商城 Nginx下开启伪静态,伪静态开启后,对系统的SEO极为有利,可以最大限度让商城页面被搜索引擎抓取,但在实际安装中,很多客户在这块都会遇到各种各样的问题. 1. 编辑商城配置文件(da ...

  9. Linux基础知识入门

    [Linux基础]Linux基础知识入门及常见命令.   前言:最近刚安装了Linux系统, 所以学了一些最基本的操作, 在这里把自己总结的笔记记录在这里. 1,V8:192.168.40.10V1: ...

  10. Java并发编程--线程封闭（Ad-hoc封闭 栈封闭 ThreadLocal）

    线程封闭实现好的并发是一件困难的事情,所以很多时候我们都想躲避并发.避免并发最简单的方法就是线程封闭.什么是线程封闭呢?就是把对象封装到一个线程里,只有这一个线程能看到此对象.那么这个对象就算不是线程 ...