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 ...
随机推荐
- QlikSense移动端使用攻略
公司内部署QlikSense服务器,除了在电脑上用浏览器访问,也可以在移动端进行访问. 移动端访问在如下网址有英文详细介绍:https://community.qlik.com/docs/DOC-19 ...
- ItemArray DataRow对象的RowState和DataRowVersion属性特点
DataTable.Rows[i].ItemArray DataTable.Rows表示所有行的集合DataTable.Rows[i]加上下标表示其中某一行DataTable.Rows[i].Item ...
- hihoCoder挑战赛32
Rikka with Sequence V 构造 #pragma comment(linker, "/STACK:102400000,102400000") #include< ...
- javascript中的原型对象
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- JavaScript Cookies使用
Cookie 是个存储在客户端(浏览器)记录信息确定用户身份的小文本文件,可以用来跟踪用户当前登陆状态和用户浏览页面的次数,记录用户输入的文本信息,也可以在页面间传递变量,记录用户一些行为. 当浏览器 ...
- element-ui Cascader 级联选择器示例
<html> <head>test</head> <style> @import url("http://unpkg.com/element- ...
- CV与IP：基础，经典以及最近发展
原文链接:http://blog.csdn.net/dcraw/article/details/7617891 原文编写层层递进,逻辑清晰: 不过看这篇转载可以少点击鼠标:http://blog.cs ...
- 从ReadImage到ML- 一个不错的博客
实在对不起原作者,为了不把文章淹没在 转载的海洋里.... 原文链接: http://www.cnblogs.com/tornadomeet/archive/2012/09/26/270404 ...
- 3 Python+Selenium的元素定位方法（id、class name、name、tag name）
[环境] Python3.6+selenium3.0.2+IE11+Win7 [定位方法] 1.通过ID定位 方法:find_element_by_id('xx') 2.通过name定位 方法:fin ...
- （转）基于MVC4+EasyUI的Web开发框架经验总结（4）--使用图表控件Highcharts
http://www.cnblogs.com/wuhuacong/p/3736564.html 在我们做各种应用的时候,我们可能都会使用到图表统计,以前接触过一些不同的图表控件,在无意中发现了图表控件 ...