angularjs1-4 事件指令

      <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>
时间: 2024-10-11 17:29:32

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

使用元素与事件指令

一.使用元素指令 ng-if 从DOM中添加和移除元素 ng-class 为某个元素设置class属性 ng-class-even 对由ng-repeat指令生成的偶数元素设置class属性 ng-class-odd 对由ng-repeat指令生成的奇数元素设置class属性 <tr ng-repeat="item in data" ng-class-even="settings.rows" ng-class-odd="settings.column

angularjs学习笔记—事件指令

angularjs学习笔记—事件指令 小俞 4.4k 3月30日 发布 推荐 4 推荐 收藏 17 收藏,11.1k 浏览 ngClick 适用标签:所有触发条件:单击 #html <div ng-controller="LearnCtrl"> <div ng-click="click()">click me</div> <button ng-click="click()">click me<

Angularjs 事件指令 input 相关指令 和样式指令 DOM 操作指令详解

Angularjs 事件指令 input 相关指令 和样式指令DOM 操作指令详解学习要点:1. AngularJs 事件指令2. input 相关指令3. 样式指令4. DOM 操作指令5. ngBind/ngBindHtml/ngBindTemplate 重点6. ng-init ng-mode ng-model-options ng-controler 1. Angularjs 事件指令自己研究:ng-click/dbclickng-mousedown/upng-mouseenter/le

AngularJS 事件指令/input相关指令/样式指令/DOM操作指令详解

1.AngularJS 事件指令 (1)ng-click 鼠标点击事件 [html] <button ng-click="count = count + 1" ng-init="count=0"> Increment  </button> <span>  count: {{count}}  </span> (2)ng-dblclick 鼠标双击事件 [html] <button ng-dblclick="

Angular——事件指令

基本介绍 angular的事件指令都是ng-click,ng-blur....的形式,类似于js的事件 基本使用 <!DOCTYPE html> <html lang="en" ng-app="App"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../libs/angula

vue(原理)_模板解析(一般指令的解析和事件指令的解析)

1.解析一般指令(以v-text为例) 其他普通指令(v-text, v-model, v-html, v-class)和上面的原理类似 2.解析事件指令(以v-on:click为例) 3.总结 事件指令解析步骤: 1) 从指令名中取出事件名2) 根据指令的值(表达式)从methods 中得到对应的事件处理函数对象3) 给当前元素节点绑定指定事件名和回调函数的dom 事件监听4) 指令解析完后, 移除此指令属性 一般指令解析步骤: 1) 得到指令名和指令值(表达式) text/html/clas

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

本文实例讲述了Angular使用操作事件指令ng-click传多个参数功能.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html ng-app="myApp"> <head> <meta charset="UTF-8"> <title>www.jb51.net angular ng-click用于操作事件的指令</title> <script src="a

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.数据驱动.双向绑定.MVVM设计模式.组件化开发.单页面应用 Vue环境:本地导入和cdn导入 2.Vue是渐进式js框架 通过对框架的了解与运用程度,来决定其在整个项目中的应用范围,最终可以独立以框架方式完成整个web前端项目.3.怎么使用vue 去官网下载然后导入 <div id="app">

angularJS事件指令

ngClick 适用标签:所有触发条件:单击 #html <div ng-controller="LearnCtrl"> <div ng-click="click()">click me</div> <button ng-click="click()">click me</button> </div> #script angular.module('learnModule',