angular学习笔记(五)-阶乘计算实例(3)
同样是上一个例子,我们要求并非实时的计算结果,而是等到用户确定自己已经输入完毕,然后进行计算:
<!DOCTYPE html>
<html ng-app>
<head>
<title>2.3.4计算阶乘实例3</title>
<meta charset="utf-8">
<script src="../angular.js"></script>
<script src="script.js"></script>
</head>
<body>
<div ng-controller = 'Factorial'>
<form action="" ng-submit="compute()">
<input type="text" ng-model="factorial.number"/>
的阶乘结果是:
<span>{{factorial.result}}</span>
<br>
<button>计算</button>
<br>
<button ng-click="reset()">重置</button>
</form>
</div>
</body>
</html>
我们给它添加两个按钮,一个用于确认计算,一个用于清空计算.
然后给表单提交和点击重置分别绑定回调:
function Factorial($scope) {
$scope.factorial = {};
$scope.factorial.number = 0;
$scope.factorial.result = 1;
$scope.factorialNum = function (num) {
if (num == 0) {
return 1;
}
else {
return num * $scope.factorialNum(--num);
}
};
$scope.compute = function () {
$scope.factorial.result = $scope.factorialNum($scope.factorial.number);
};
$scope.reset = function () {
$scope.factorial.number = 0;
$scope.factorial.result = 1;
};
}
去掉了$watch对factorial.number的监测,而是在表单被提交的时候才进行计算,然后点击重置的时候,将number和result进行重置
angular对dom元素绑定事件的规则如下:
onclick --- ng-click
ondblclick --- ng-dblclick
...
*其实两个button都是会触发form的提交事件的.
*比较好的方法是把compute()写在计算button的ng-click里,这里仅作演示ng-submit
angular学习笔记(五)-阶乘计算实例(3)的更多相关文章
- angular学习笔记(五)-阶乘计算实例(2)
<!DOCTYPE html> <html ng-app> <head> <title>2.3.3计算阶乘实例2</title> <m ...
- angular学习笔记(五)-阶乘计算实例(1)
<!DOCTYPE html> <html ng-app> <head> <title>2.3.2计算阶乘实例1</title> <m ...
- tensorflow学习笔记五：mnist实例--卷积神经网络(CNN）
mnist的卷积神经网络例子和上一篇博文中的神经网络例子大部分是相同的.但是CNN层数要多一些,网络模型需要自己来构建. 程序比较复杂,我就分成几个部分来叙述. 首先,下载并加载数据: import ...
- input子系统学习笔记六 按键驱动实例分析下【转】
转自:http://blog.chinaunix.net/uid-20776117-id-3212095.html 本文接着input子系统学习笔记五 按键驱动实例分析上接续分析这个按键驱动实例! i ...
- Typescript 学习笔记五：类
中文网:https://www.tslang.cn/ 官网:http://www.typescriptlang.org/ 目录: Typescript 学习笔记一:介绍.安装.编译 Typescrip ...
- ArcGIS案例学习笔记-中国2000坐标转换实例
ArcGIS案例学习笔记-中国2000坐标转换实例 联系方式:谢老师,135-4855-4328,xiexiaokui#qq.com 目的:西安1980.中国2000.WGS84(GPS)等任意坐标系 ...
- angular学习笔记(三十一)-$location(2)
之前已经介绍了$location服务的基本用法:angular学习笔记(三十一)-$location(1). 这篇是上一篇的进阶,介绍$location的配置,兼容各版本浏览器,等. *注意,这里介绍 ...
- angular学习笔记(三十)-指令(10)-require和controller
本篇介绍指令的最后两个属性,require和controller 当一个指令需要和父元素指令进行通信的时候,它们就会用到这两个属性,什么意思还是要看栗子: html: <outer‐direct ...
- angular学习笔记(三十)-指令(7)-compile和link(2)
继续上一篇:angular学习笔记(三十)-指令(7)-compile和link(1) 上一篇讲了compile函数的基本概念,接下来详细讲解compile和link的执行顺序. 看一段三个指令嵌套的 ...
随机推荐
- 下载 jdk
1.下载JDK: 首先我们需要下载java开发工具包JDK,下载地址如下: http://www.oracle.com/technetwork/java/javase/downloads/index. ...
- http 请求报文和响应报文
1.请求报文 示例: 2.响应报文 示例:
- windows命令：control命令
Windows的命令列模式下有个非常好用的命令叫做Control.这个命令其实就是控制『控制台』的一个接口.你可以用这个命令直接叫起一些平常要找很久才会找到的窗口.最简单的一个例子,你只要在『开始』 ...
- [Unity-1] Unity简单介绍
Unity是一套包含图形.声音.物理等功能的游戏引擎,提供了一个强大的关卡编辑器.支持大部分主流3D软件格式,使用C#或者JavaScript等高级语言实现脚本功能.使开发人员无需了解底层复杂技术,高 ...
- 拯救者14ISK添加ssd6记录
说起为何,我要安装ssd,拯救者14isk配置也不低,我加了4Gddr4的内存,目前8G内存ddr4/2G独显ddr5显卡GT960/i5-6300处理器.每次开机响应慢,还会出现磁盘100%,很受不 ...
- HDUOJ---1712 ACboy needs your help
ACboy needs your help Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Ot ...
- Python 死循环和嵌套循环
何为死循环:在编程中,一个无法靠自身的控制终止的循环被称为死循环. 死循环的使用:死循环并非一无是处,C语言中死循环while true或 while 1 是单片机编程的普遍用法,死循环一直运行等待中 ...
- 如何理解并学习javascript中的面向对象（OOP） [转]
如果你想让你的javascript代码变得更加优美,性能更加卓越.或者,你想像jQuery的作者一样,写出属于自己优秀的类库(哪怕是基于 jquery的插件).那么,你请务必要学习javascript ...
- iOS - CFSocket 的使用
1.CFSocket 苹果对对底层 BSD Socket 进行轻量级的封装(纯 C). 主要使用的 API:CFSocekt 用于建立连接,CFStream 用于读写数据. 2.基本使用 2.1 Cl ...
- 《JAVA与模式》之桥接模式
桥接模式是一种结构型模式,它主要应对的是:由于实际的需要,某个类具有两个或两个以上的维度变化,如果只是用继承将无法实现这种需要,或者使得设计变得相当臃肿. 桥接模式的做法是把变化部分抽象出来,使变化部 ...