<div ng-app="myApp">

          <div ng-controller="firstController">

                <div ng-click="run()">点击{{text}}</div>

          </div>

      </div>

      <script type="text/javascript">

          var app = angular.module("myApp", []);

          app.controller('firstController',function($scope){

                $scope.text='phonegap中文网';

                  $scope.run=function(){

                      alert('run');

                      console.log('run');

                  }

          });

      </script>
<!DOCTYPE html>

<html>

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <title>无标题文档</title>

        <script type="text/javascript" src="angular.min.js"></script>

    </head>

    <body>

      <div ng-app="myApp">

          <div ng-controller="firstController">

              <input type="checkbox" ng-model="sel">

              <select>

                  <option>11111</option>

                  <option ng-selected="sel" >22222</option>

                  //select="selected"

              </select>

              <input type="checkbox" ng-change="change()" ng-model="c" />

              {{c}}

              <br>

              <input type="text" value="你好" ng-copy="aaa='按下复制键的时候执行的事件'">{{aaa}}

              <input type="text" value="你好" ng-cut="bbb='按下剪切键的时候执行的事件'">{{bbb}}

              <input type="text" value="你好" ng-paste="ccc='按下黏贴键的时候执行的事件'">{{ccc}}

              <br>

              <br>

              <div ng-bind="text"></div>

              <div ng-cloak>{{text}}</div> //防止加载慢出现{{}}

              <div ng-non-bindable>{{text}}</div>

          </div>

      </div>

      <script type="text/javascript">

          var app = angular.module("myApp", []);

          app.controller('firstController',function($scope){

              $scope.text='phonegap中文网';

              $scope.change=function(){

                if($scope.c==true){

                    alert('选中');

                }else{

                    alert('未选中');

                }

              }

          });

      </script>

    </body>

</html>
<!DOCTYPE html>

<html>

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <title>无标题文档</title>

        <script type="text/javascript" src="angular.min.js"></script>

    </head>

    <body>

      <div ng-app="myApp">

          <div ng-controller="firstController">

              <input type="button" ng-value="text" ng-disabled="isDisabled">

              <input type="text" value="{{text}}" ng-readonly="isDisabled">

              <input type="checkbox" value="{{text}}" ng-checked="isDisabled">

          </div>

      </div>

      <script type="text/javascript">

          var app = angular.module("myApp", []);

          app.controller('firstController',function($scope,$interval){

                $scope.n=5

                $scope.text= $scope.n+'秒';

                $scope.isDisabled=true;

               var time=$interval(function(){

                   $scope.n--;

                   $scope.text= $scope.n+'秒';

                   if($scope.n==0){

                       $interval.cancel(time);;

                       $scope.text='可以点击了';

                       $scope.isDisabled=false;

                   }

               },1000);

          });

      </script>

    </body>

</html>

angularjs1-4 事件指令的更多相关文章

  1. AngularJS1.X学习笔记4-内置事件指令及其他

    AngularJS为我们定义了一系列事件指令,方便我们对用户的操作作出响应.甚至他还有一个可选模块提供了触摸事件和手势事件的支持,为移动端开发提供了可能.现在开始学习一下AngularJS的事件指令. ...

  2. Angular——事件指令

    基本介绍 angular的事件指令都是ng-click,ng-blur....的形式,类似于js的事件 基本使用 <!DOCTYPE html> <html lang="e ...

  3. Vue之挂载点、变量、事件、js对象、文本指令、过滤器、事件指令和属性指令

    1.vue导入-挂载点 <!DOCTYPE html> <html lang="zh"> <head> <meta charset=&qu ...

  4. Vue框架（一）——Vue导读、Vue实例（挂载点el、数据data、过滤器filters）、Vue指令(文本指令v-text、事件指令v-on、属性指令v-bind、表单指令v-model)

    Vue导读 1.Vue框架 vue是可以独立完成前后端分离式web项目的js框架 三大主流框架之一:Angular.React.Vue vue:结合其他框架优点.轻量级.中文API.数据驱动.双向绑定 ...

  5. Angular使用操作事件指令ng-click传多个参数示例

    本文实例讲述了Angular使用操作事件指令ng-click传多个参数功能.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html ng-app="m ...

  6. 第一章、VUE-挂载点-实例成员-数据-过滤器-文本指令-事件指令-属性指令-表单指令-01

    目录 路飞项目 vue vue 导读 vue 的优势 渐进式框架 引入 vue 实例成员 - 挂载点 el js 对象(字典)补充 实例成员 - 数据 data 实例成员 - 过滤器 filters ...

  7. VUE-挂载点-实例成员-数据-过滤器-文本指令-事件指令-属性指令-表单指令-01

    目录 路飞项目 vue vue 导读 vue 的优势 渐进式框架 引入 vue 实例成员 - 挂载点 el js 对象(字典)补充 实例成员 - 数据 data 实例成员 - 过滤器 filters ...

  8. Vue框架:挂载点-过滤器-事件指令-表单指令

    近期学习安排 1.Vue框架 前台html+css+js框架,是不同于js与JQuery的数据驱动框架, 学习的知识点:指令 |  实例成员 | vue项目 2.drf框架 django的插件,完成前 ...

  9. [Vue入门及介绍，基础使用、MVVM架构、插值表达式、文本指令、事件指令]

    [Vue入门及介绍,基础使用.MVVM架构.插值表达式.文本指令.事件指令] 1)定义:javascript渐进式框架 ​ 渐进式:可以控制一个页面的一个标签,也可以控制一系列标签,也可以控制整个页面 ...

  10. AngularJs ng-change事件/指令(转)

    from:http://blog.csdn.net/u011127019/article/details/52564111 定义和用法 ng-change 指令用于告诉 AngularJS 在 HTM ...

随机推荐

  1. Webpack 中的 Tree Shaking

    Tree Shaking Tree shaking 用于描述移除JavaScript上下文中的未引用代码(dead-code). 为了更方便地理解tree shaking,我们可以将应用程序想象成一棵 ...

  2. B - Nearly Lucky Number

    Problem description Petya loves lucky numbers. We all know that lucky numbers are the positive integ ...

  3. 由于找不到 opencv_world320.dll，无法继续执行代码

    首先找到自己软件安装(解压)的路径openCV (安装(解压)目录\opencv\build\x64\vc14\bin) 我的安装(解压)目录是:F:\OpenCV\Three320\opencv\b ...

  4. js中获取浏览器和屏幕高度

    Javascript: IE中: document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高 ...

  5. 10) 十分钟学会android--app数据保存三种方式

    虽然可以在onPause()时保存一些信息以免用户的使用进度被丢失,但大多数Android app仍然是需执行保存数据的动作.大多数较好的apps都需要保存用户的设置信息,而且有一些apps必须维护大 ...

  6. Java 类 对象 包

    Java类和对象 类是具有相同属性和行为的一组对象的集合.(属性是用来描述对象的特征可以理解为成员变量 例如:一个学生(对象)他的类可能是学校,它的属性可能是学号,姓名,年龄,班级,成绩等等) 例子: ...

  7. Kinect安装与配置（openNI2）

    原文链接:http://blog.csdn.net/chenxin_130/article/details/8580636 简介 最近OpenNI2的推出,小斤也要多给博客除除草了,并在闲暇之余做一些 ...

  8. 动态给某一个元素添加active

    <li class="one_data" data-id='+ navGroup.self_first_nav[i].id +'><a  href='+ navG ...

  9. B站真的是一个神奇的地方，初次用Python爬取弹幕。

    "网上冲浪""886""GG""沙发"--如果你用过这些,那你可能是7080后: "杯具"" ...

  10. BZOJ 1355: [Baltic2009]Radio Transmission AC自动机/KMP

    被一个KMP傻题搞蒙圈了,此题AC自动机空间超限,只能用KMP写(我只会AC自动机QAQ)...... AC自动机 Code: // luogu-judger-enable-o2 #include & ...