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>
angularjs1-4 事件指令的更多相关文章
- AngularJS1.X学习笔记4-内置事件指令及其他
AngularJS为我们定义了一系列事件指令,方便我们对用户的操作作出响应.甚至他还有一个可选模块提供了触摸事件和手势事件的支持,为移动端开发提供了可能.现在开始学习一下AngularJS的事件指令. ...
- Angular——事件指令
基本介绍 angular的事件指令都是ng-click,ng-blur....的形式,类似于js的事件 基本使用 <!DOCTYPE html> <html lang="e ...
- Vue之挂载点、变量、事件、js对象、文本指令、过滤器、事件指令和属性指令
1.vue导入-挂载点 <!DOCTYPE html> <html lang="zh"> <head> <meta charset=&qu ...
- 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.数据驱动.双向绑定 ...
- Angular使用操作事件指令ng-click传多个参数示例
本文实例讲述了Angular使用操作事件指令ng-click传多个参数功能.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html ng-app="m ...
- 第一章、VUE-挂载点-实例成员-数据-过滤器-文本指令-事件指令-属性指令-表单指令-01
目录 路飞项目 vue vue 导读 vue 的优势 渐进式框架 引入 vue 实例成员 - 挂载点 el js 对象(字典)补充 实例成员 - 数据 data 实例成员 - 过滤器 filters ...
- VUE-挂载点-实例成员-数据-过滤器-文本指令-事件指令-属性指令-表单指令-01
目录 路飞项目 vue vue 导读 vue 的优势 渐进式框架 引入 vue 实例成员 - 挂载点 el js 对象(字典)补充 实例成员 - 数据 data 实例成员 - 过滤器 filters ...
- Vue框架:挂载点-过滤器-事件指令-表单指令
近期学习安排 1.Vue框架 前台html+css+js框架,是不同于js与JQuery的数据驱动框架, 学习的知识点:指令 | 实例成员 | vue项目 2.drf框架 django的插件,完成前 ...
- [Vue入门及介绍，基础使用、MVVM架构、插值表达式、文本指令、事件指令]
[Vue入门及介绍,基础使用.MVVM架构.插值表达式.文本指令.事件指令] 1)定义:javascript渐进式框架 渐进式:可以控制一个页面的一个标签,也可以控制一系列标签,也可以控制整个页面 ...
- AngularJs ng-change事件/指令(转)
from:http://blog.csdn.net/u011127019/article/details/52564111 定义和用法 ng-change 指令用于告诉 AngularJS 在 HTM ...
随机推荐
- Queue 与List、LinkedList与 ArrayList 区别
List 是一个接口,不能实例化,通过实例化ArrayList 或者LinkedList来调用:List list = new ArrayList(); |--List: 元素是有序的(怎么存的就怎么 ...
- QlikSense移动端使用攻略
公司内部署QlikSense服务器,除了在电脑上用浏览器访问,也可以在移动端进行访问. 移动端访问在如下网址有英文详细介绍:https://community.qlik.com/docs/DOC-19 ...
- C#解除某类警告。。。。。。。。。。
C#预处理器指令取消不必要的警告 今天将自己写的一个类库生成一个DLL后,想把注释也加进去.... 方法:在属性->生成选项卡->XML文档文件(勾选)(生成的文件名不能修改,使用时必须跟 ...
- .net web api跨域问题
No 'Access-Control-Allow-Origin' Ajax跨域访问解决方案 No 'Access-Control-Allow-Origin' header is present o ...
- Hadoop系列之实验环境搭建
实验环境基本配置 硬件:硬盘单节点50GB,1G内存,单核. 操作系统:CentOS6.4 64bit Hadoop:2.20 64bit(已编译) JDK:jdk1.7 磁盘分区: / 5GB /b ...
- VS2015启动显示ID为XXXX的进程当前未运行
解决办法:在启动项目根目录下用文本编辑器打开Web项目下的{X}.csproj文件,然后查找 <WebProjectProperties>,将这一对标签之间的内容全部删除,然后再打开项目就 ...
- javaweb 之 代理模式
一.动态代理 1.1.代理模式 什么是代理模式及其作用 Proxy Pattern(即:代理模式),23种常用的面向对象软件的设计模式之一 代理模式的定义:为其他对象提供一种代理以控制对这个对象的访问 ...
- java keytool证书工具使用小结（转载）
原文地址:http://www.micmiu.com/lang/java/keytool-start-guide/ Keytool 是一个Java数据证书的管理工具 ,Keytool将密钥(key)和 ...
- APUE学习笔记3——文件和目录
1 简介 之前学习了执行I/O操作的基本函数,主要是围绕普通文件I/O的打开.读或写.下面继续学习Unix文件系统的其他特征和文件的基本性质.我们将从stat函数开始,了解stat结构所代表的文件属性 ...
- nutz 自定义sql的使用
虽然提供了Cnd,但是用起来是觉得有点不方便,然后就直接编写Sql语句.nutz提供了一些方法. Nutz.Dao 的自定义 SQL 部分的解决方案是: // 不推荐使用 用户可以硬编码 SQL 语句 ...