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 ...
随机推荐
- 虚基类——(1)定义人员类Person: 公有成员：姓名（Name）； 保护成员：性别（Gender），年龄（Age）； 构造函数和析构函数
题目描述: (1)定义人员类Person: 公有成员:姓名(Name): 保护成员:性别(Gender),年龄(Age): 构造函数和析构函数 (2) 从人员类Person派生学生记录类Student ...
- BS程序性能调优
首先想到的是优化算法.改进技术.扩展设备去做优化.其实在讨论性能的时候,绕不开对业务的理解,不同的业务系统对性能的要求不同,优化方式也不一样.优化性能的前提是保证业务的正确性.我们平时关注的性能主要是 ...
- javascript中对象属性搜索原则
为什么通过对象就能访问到原型中的属性或者方法? 属性搜索原则: 1 首先会在对象本身查找有没有该属性,如果有直接返回 2 如果没有,此时就会在构造函数中查找通过this给对象添加的成员中有没有,如果有 ...
- Mock Framework
Typemock Isolator; Rhino Mocks; NMock; MS Fakes(has not same mechanism with NMock) Mock is usually u ...
- 检查点和SCN
有一家叫甲骨文的粮店,老板很严谨,为了防止仓库的粮食在买入卖出的时候发生问题,他制订一套流程,首先进出仓库的每一旦粮食都要求有一个编号(SCN),而且出入库之前必须先放到一个平台上(buffer ca ...
- python tips: for循环的小问题
在python中,用for对列表进行遍历的时候,迭代器中维护的是列表的索引而不是列表的元素.也就是说,for循环是对索引进行迭代,如果在for循环过程中修改了列表,迭代出来的值是新列表的索引位置,如果 ...
- 训练1-P
一个矩形的面积为S,已知该矩形的边长都是整数,求所有满足条件的矩形中,周长的最小值. 例如:S = 24,那么有{1 24} {2 12} {3 8} {4 6}这4种矩形,其中{4 6}的周长最小, ...
- buntu Rhythmbox解决中文乱码
Ubuntu Rhythmbox解决中文乱码 在这里介绍的是一个解决方法,修改变量. 在终端输入: gedit ~/.profile 在最后加入下面内容: exportGST_ID3_TAG_ENCO ...
- android Build系统
http://www.ibm.com/developerworks/cn/opensource/os-cn-android-build/ android Build系统 超链接
- redis 模拟搭建集群
一.本文是在一台 linux 系统上,模拟搭建 redis 集群.3 台主机,3 台从机. 二.redis 安装步骤 http://www.cnblogs.com/fangwu/p/8602357.h ...