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>
复制代码

 本文转自农夫山泉别墅博客园博客,原文链接:http://www.cnblogs.com/yaowen/p/7225207.html,如需转载请自行联系原作者

相关文章
|
C++
【PTA】​L1-006 连续因子​(C++)
【PTA】​L1-006 连续因子​(C++)
446 0
【PTA】​L1-006 连续因子​(C++)
|
12月前
|
前端开发 JavaScript Java
基于Java+Springboot+Vue开发的美容预约管理系统
基于Java+Springboot+Vue开发的美容预约管理系统(前后端分离),这是一项为大学生课程设计作业而开发的项目。该系统旨在帮助大学生学习并掌握Java编程技能,同时锻炼他们的项目设计与开发能力。通过学习基于Java的美容预约管理系统项目,大学生可以在实践中学习和提升自己的能力,为以后的职业发展打下坚实基础。
117 3
基于Java+Springboot+Vue开发的美容预约管理系统
|
5月前
|
人工智能 中间件 程序员
LLM 不断提升智能下限,MCP 不断提升创意上限
LLM 是大脑,MCP 是手脚。LLM 不断提升智能下限,MCP 不断提升创意上限。所有的应用和软件都会被 AI 改造,将向所有的应用和软件都会被 MCP 改造的新范式演进。
283 25
|
存储 编解码 缓存
阿里云服务器实例规格选择参考:根据业务场景选择云服务器实例规格
在阿里云服务器的购买过程中,云服务器实例规格是很多用户最难选择的一个选项,因为阿里云有着多达几十种不同的实例规格,为此,阿里云官方在云服务器购买页面新推出了一个场景化选型推荐,用户可通过自己的上云场景结合场景化选型里面的业务场景和细分场景来选择适合自己的阿里云服务器实例规格,在很大程度上解决了新手用户在选择阿里云服务器实例规格上的困局。
266 11
阿里云服务器实例规格选择参考:根据业务场景选择云服务器实例规格
|
6月前
|
Java 测试技术 调度
JDK21有没有什么稳定、简单又强势的特性?
这篇文章主要介绍了Java虚拟线程的发展及其在AJDK中的实现和优化。
JDK21有没有什么稳定、简单又强势的特性?
|
6月前
|
人工智能 前端开发 程序员
通义灵码2.0 AI 程序员体验
通义灵码AI程序员全面上线,作为国内首个真正落地的AI程序员,支持Qwen2.5-Max等模型并适配VS Code与JetBrains IDEs。它在新功能开发中快速生成代码框架,助力跨语言编程、自动生成单元测试,还能智能分析错误信息提供修复建议。体验活动显示,通义灵码2.0在代码生成、单元测试和跨语言编程上效率显著提升,极大优化开发者工作流程,成为不可或缺的智能助手。
198 3
|
10月前
|
存储 人工智能 算法
pfinder实现原理揭秘
`pfinder`算法通过启发式搜索和图搜索方法,提供了一种高效的路径查找和路径优化解决方案。在导航系统、机器人路径规划和游戏AI等领域,`pfinder`算法具有广泛的应用前景。本文详细解析了 `pfinder`算法的实现原理及其在实际中的应用,希望对您理解和实现路径查找算法有所帮助。
126 1
|
SQL Oracle NoSQL
实时计算 Flink版操作报错合集之报错“找不到对应的归档日志文件”,怎么处理
在使用实时计算Flink版过程中,可能会遇到各种错误,了解这些错误的原因及解决方法对于高效排错至关重要。针对具体问题,查看Flink的日志是关键,它们通常会提供更详细的错误信息和堆栈跟踪,有助于定位问题。此外,Flink社区文档和官方论坛也是寻求帮助的好去处。以下是一些常见的操作报错及其可能的原因与解决策略。
|
Linux Windows
【Linux】rzsz——本地Windows与云端Linux文件传输工具
【Linux】rzsz——本地Windows与云端Linux文件传输工具
256 0
|
设计模式 前端开发 PHP
【PHP开发专栏】Laravel框架快速上手
【4月更文挑战第30天】本文介绍了Laravel,一个流行的PHP Web框架,以其优雅语法和简洁设计受开发者喜爱。内容分为三部分:1) 环境准备与项目创建,包括安装Composer和使用Laravel安装器创建新项目;2) 基本概念和核心组件,涉及路由、控制器、模型和视图的使用;3) 进阶功能与实战应用,如用户认证、表单验证和邮件发送。通过学习,读者可快速上手Laravel,进行高效Web应用开发。
167 0