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的执行顺序. 看一段三个指令嵌套的 ...
随机推荐
- PHP 表单 - 5（完整表单实例）
PHP 完整表单实例 本章节将介绍如何让用户在点击"提交(submit)"按钮提交数据前保证所有字段正确输入. PHP - 在表单中确保输入值 在用户点击提交按钮后,为确保字段值是 ...
- VMWare虚拟机“锁定文件失败“怎么办？
虚拟机突然蓝屏了,然后就启动不了了,提示"锁定文件失败,打不开磁盘或快照所依赖的磁盘"的解决方法: 如果使用VMWare虚拟机的时候突然系统崩溃蓝屏,有一定几率会导致无法启动,会提 ...
- Hotaru's problem（hdu5371+Manacher）多校7
Hotaru's problem Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others) ...
- jsp中的js嵌入Extjs与后台action交互
近期做前台须要和后台交互数据,直接使用js一直没实现.最后使用extjs实现了,extjs代码直接嵌入到jsp的js代码中就可以(0跟jsp里使用extjs一样,须要载入extjs的几个文件) < ...
- lnmp环境的使用教程
lnmp环境的使用 安装的软件都安装到了:/usr/local 管理nginx service nginx start|stop|restart|reload 管理mysql 直接执行mysql即可登 ...
- 移动端网页宽度值（未加meta viewport标签）
移动端网页宽度值(未加meta viewport标签): iphone:980px Galaxy(盖乐世):980px Nexus:980px blackberry(黑莓):980px LG:980p ...
- C#：定义窗口快捷键
事情的关键是要设置Form的KeyPreview属性,然后再在KeyDown事件中检查按键. public class TEST : Form { public TEST() { Initialize ...
- 【TP3.2】模块化设计，新建Admin模块
1.模块化: Application 默认应用目录(可以设置) ├─Common 公共模块(不能直接访问) ├─Home 前台模块 ├─Admin 后台模块 ├─... 其他更多模块 ├─Runtim ...
- Web Service——CXF
1. 什么是CXF Apache CXF = Celtix + Xfire,开始叫 Apache CeltiXfire,后来更名为 Apache CXF 了,以下简称为 CXF.Apache CXF ...
- 基于JavaScript 声明全局变量的三种方式
本文转自脚本之家:http://www.jb51.net/article/36548.htm JS中声明全局变量主要分为显式声明或者隐式声明下面分别介绍. 声明方式一: 使用var(关键字)+变量名( ...