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的执行顺序. 看一段三个指令嵌套的 ...
随机推荐
- this词法
1.示例代码 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UT ...
- 腾讯地图api将物理地址转化成坐标
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- Codeforces554C:Kyoya and Colored Balls(组合数学+费马小定理)
Kyoya Ootori has a bag with n colored balls that are colored with k different colors. The colors are ...
- iOS-仿京东6位密码支付输入框
概述 用于安全支付的密码支付输入框. 详细 代码下载:http://www.demodashi.com/demo/10709.html 开发需求中有时候我们需要用于安全支付的功能, 需要设置APP钱包 ...
- 面向对象程序设计（OOP设计模式）－结构型模式之装饰器模式的应用与实现
课程名称:程序设计方法学 实验4:OOP设计模式-结构型模式的应用与实现 时间:2015年11月18日星期三,第3.4节 地点:理1#208 一.实验目的 加深对结构型设计模式的理解以及在开发中的实际 ...
- eclipse容易卡死或者较慢的解决方案
http://blog.sina.com.cn/s/blog_5c6c4dc90100lg8n.html 问题: Eclipse经常卡住或Building workspace等待,感觉很不爽,很多朋友 ...
- JS打开新窗口防止被浏览器阻止的方法[转]
本文实例讲述了JS打开新窗口防止被浏览器阻止的方法.分享给大家供大家参考.具体分析如下: 用传统的window.open()方式打开新窗口,会被浏览器阻止,那么,我们如何才能让JS打开新窗口不被浏览器 ...
- 修改jQuery.validate验证方法和提示信息
1.添加验证方法 在jquery.validate.js文件中直接添加验证方法,例如: jQuery.validator.addMethod("Specialstring", fu ...
- python学习笔记——正则表达式regex
1 概述 1.1 定义 本质是由一系列字符和特殊符号组成的字串,用来表示一定规则的某一类字符串. 1.2 特点 正则表达式是一个独立的技术,其在多种编程语言中使用. 在python语言中的正则表达式模 ...
- 使用Xcode、Android Studio将项目链接到Git
一.使用Android Studio创建本地git仓库: 1.检查本地git环境:在Android Studio中setting-->Version Control 点击Test按钮,提示suc ...