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的执行顺序. 看一段三个指令嵌套的 ...
随机推荐
- secureCRT简单设置(学习笔记二)
菜鸟记录. 一.更改终端类型 选项-全局选项-默认会话-编辑默认设置-终端-仿真-右侧选择类型,下方设置缓冲区大小 二.设置字体和外观 上方窗口外观-右侧设置-字体设置字体类型大小,下面光标可以设置光 ...
- Idea Spring-boot gradle lombok
1:build.gradle compile("org.projectlombok:lombok:1.16.16") 2:idea安装lombok插件 3:设置 4:重启
- 如何在hosts文件添加自己想要解析的网站？及修改hosts的作用
http://union.zhuna.cn/help/144.asp 在Windows2003/XP系统中位于C:\Winnt\System32\Drivers\Etc 目录中,找到host文件. 首 ...
- HDU 5358 First One(枚举)
这道题假设依照表达式一个个来算肯定超时,下午时候想了一个O(nlogn*logn)的算法.可是t了.由于这道题卡的很紧几百个例子,必须nlogn的算法才干够ac 回到这道题,考虑log(sum(i,j ...
- Golang配置文件解析-oozgconf
代码地址如下:http://www.demodashi.com/demo/14411.html 简介 oozgconf基于Golang开发,用于项目中配置文件的读取以及加载,是一个轻量级的配置文件工具 ...
- iOS开发之复制字符串到剪贴板
概述 一般有邀请复制链接需求功能,把字符串复制到系统剪贴板,供用户粘贴使用链接. 详细 代码下载:http://www.demodashi.com/demo/10714.html 一.主要思路 1.在 ...
- leetcode || 58、Length of Last Word
problem: Given a string s consists of upper/lower-case alphabets and empty space characters ' ', ret ...
- Android API之android.provider.ContactsContract
android.provider.ContactsContract ContactsContract是联系人provider和app的contract.定义了已支持的URL和column.取代了之前的 ...
- HDUOJ----1263水果
水果 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Submissi ...
- python学习笔记——多进程间通信——Linux信号基础
1 信号的基本描述 Signal信号(其全程为软中断信号)是Linux系统编程中非常重要的概念,信号是异步进程中通信的一种方式. 作用是通知进程发生了异步事件.进程之间可以调用系统来传递信号, 本身内 ...