@{

    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. 去除input[type=number]最右边的spinners(默认加减符号)

    // 去掉input[type=number]默认的加减号 input[type='number'] { -moz-appearance:textfield; } input[type=number] ...

  2. MySql中Blob二进制对象的处理

    BLOB (binary large object),二进制大对象,是一个可以存储二进制文件的容器. 可以用于存储图片等信息 Demo1:存储图片 String sql="INSERT IN ...

  3. eclipse项目显示标尺

    Windows-Preferences-General-Editors-Text Editors-Show line numbers

  4. javascript一些常用函数

    1.indexof 方法可返回某个指定的字符串值在字符串中首次出现的位置. 注释:indexOf() 方法对大小写敏感! 如果要检索的字符串值没有出现,则该方法返回 -1.  例 : 在本例中,我们将 ...

  5. 用jQuery的ajax请求一般处理程序返回json数据

    1.web页面代码: 注意事项: dataType类型一定要写成json. 2.一般处理程序代码: 注意事项: ContentType类型写成"application/json"或 ...

  6. jquery下 选择器整理

    jQuery 的选择器可谓之强大无比,这里简单地总结一下常用的元素查找方法 $("#myELement") 选择id值等于myElement的元素,id值不能重复在文档中只能有一个 ...

  7. pyqt5和qt-designer结合

    在ubuntu中我们安装了python3-pyqt5这个包后就可以用pyqt5编程了,但是只能用纯代码写窗体,很麻烦.我们要用qt-designer来设计窗体. 我们通过新立得安装qt4-design ...

  8. Android手机SSH Client客户端推荐JuiceSSH

    Windows上建立ssh服务器 参见: http://www.cnblogs.com/xred/archive/2012/04/21/2461627.html Android手机SSH Client ...

  9. 修改UITextField Placeholder的颜色

    修改UITextField Placeholder的颜色 1 第一种情况只是修改颜色等文字属性 创建属性字典 NSDictionary *attrsDic = @{ NSForegroundColor ...

  10. C++11 in Qt5

    本文转载自:http://woboq.com/blog/cpp11-in-qt5.html   C++11 in Qt5 Posted by Olivier Goffart on 11 June 20 ...