AngularJs练习Demo3

@{
    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>

  

时间: 2024-08-03 19:25:53

AngularJs练习Demo3的相关文章

5款好用的开源JS图片裁剪插件(3个jQuery插件,2个AngularJS插件)

tapmodo / Jcrop Jcrop是人气最高的图片裁剪jQuery插件,stars数量2k+,功能非常丰富,文档齐全,首选.Github.com官网也使用了这个插件.有一个小细节是,边框线的蚂蚁线是动画的,真的很用心. Jcrop项目地址 | demo1 | demo2 | demo3 | demo4 fengyuanchen / cropper Cropper也是一款图片裁剪jQuery插件,stars数量1k+,是杭州的前端工程师Fengyuan Chen所写的,功能也相当丰富,裁剪

angularJs中关于ng-class的三种使用方式说明

在开发中我们通常会遇到一种需求:一个元素在不同的状态需要展现不同的样子. 而在这所谓的样子当然就是改变其css的属性,而实现能动态的改变其属性值,必然只能是更换其class属性 这里有三种方法: 第一种:通过数据的双向绑定(不推荐) 第二种:通过对象数组 第三种:通过key/value 下面简单说下这三种: 第一种:通过数据的双向绑定 实现方式: function changeClass(){   $scope.className = "change2"; } <div clas

Node.js 使用angularjs取得Nodejs http服务端返回的JSON数组示例

server.js代码: // 内置http模块,提供了http服务器和客户端功能(path模块也是内置模块,而mime是附加模块) var http=require("http"); // 创建服务器,创建HTTP服务器要调用http.createServer()函数,它只有一个参数,是个回调函数,服务器每次收到http请求后都会调用这个回调函数.服务器每收到一条http请求,都会用新的request和response对象触发请求函数. var server=http.createS

Bootstrap + AngularJS+ Ashx + SQL Server/MySQL

去年年底12月,为适应移动端浏览需求,花了1个月时间学习Bootstrap,并将公司ASP网站重构成ASP.NET. 当时采取的网站架构: Bootstrap + jQuery + Ashx + SQL Server 时间紧,没人带,只能硬着头皮,最后如期完成,但是也遗留了几个问题. 问题: 1.页面查询条件太复杂,太多的checkbox,jQuery操作DOM虽然方便,但是组合成json提交给后端还是比较麻烦,有没有天然支持json的前端框架或者脚本语言? html控件做的任何修改,都自动保存

一招制敌 - 玩转 AngularJS 指令的 Scope (作用域),讲得特别好

学习了AngularJS挺长时间,最近再次回首看看指令这部分的时候,觉得比自己刚开始学习的时候理解的更加深入了,尤其是指令的作用域这部分. 步入正题: 每当一个指令被创建的时候,都会有这样一个选择,是继承自己的父作用域(一般是外部的Controller提供的作用域或者根作用域($rootScope)),还是创建一个新的自己的作用域,当然AngularJS为我们指令的scope参数提供了三种选择,分别是:false,true,{}:默认情况下是false. scope = false 首先我们来看

前端angularJS利用directive实现移动端自定义软键盘的方法

最近公司项目的需求上要求我们iPad项目上一些需要输入数字的地方用我们自定义的软键盘而不是移动端设备自带的键盘,刚接到需求有点懵,因为之前没有做过,后来理了一下思路发现这东西也就那样.先看一下实现之后的效果: 实现的效果就是当点击页面中需要弹出软键盘的时候软键盘弹出,浮在页面的中间,和模态框一样的效果,可以在软键盘中输入任何数字,附带的功能有小数点.退格.清空.确定等功能.当在键盘上点击数字的时候页面中的表单中实时的添加对应的数字,上图中可以看到. 产品经理那边给的原因是iPad屏幕本来就小,如

AngularJs自定义过滤器filter

AngularJs自带有很多过滤器,现在Insus.NET演示一个自定义的过滤器,如实现一个数据的平方. 本演示是在ASP.NET MVC环境中进行. 创建一个app: 创建一个控制器: 接下来是重点,创建一个过滤器,例子中的过滤器是实现一个数值的平方. 以上的所指的App,控制器和过滤器均是依Angularjs而言. 下面是ASP.NET MVC的视图,实现数据过滤: 程序运行结果:

AngularJS:directive自定义的指令

除了 AngularJS 内置的指令外,我们还可以创建自定义指令. 你可以使用 .directive 函数来添加自定义的指令. 要调用自定义指令,HTML 元素上需要添加自定义指令名. 使用驼峰法来命名一个指令, runoobDirective, 但在使用它时需要以 - 分割, runoob-directive: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script

Angularjs[补21] - 显示注入,隐示注入

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div ng-app="myApp"> <div ng-controller="secondController"> &