<!DOCTYPE html>
<html ng-app>
<head>
<title>2.3.2计算阶乘实例1</title>
<meta charset="utf-8">
<script src="../angular.js"></script>
<script src="script.js"></script>
</head>
<body>
<div ng-controller = 'Factorial'>
<form action="">
<input type="text" ng-model="factorial.number" ng-change="compute()"/>
的阶乘结果是:
<span>{{factorial.result}}</span>
</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);
}
}

1.ng-model:

将input元素与factorial.number进行绑定

2.ng-change:

给input元素的change事件绑定回调函数为compute方法

3.{{factorial.result}}

compute方法会通过factorial.number的值计算factorial.result的值,然后factorial.result的值是和ui进行绑定的.所以,input的value值改变时,span中相应的值也会改变

angular学习笔记(五)-阶乘计算实例(1)的更多相关文章

  1. angular学习笔记(五)-阶乘计算实例(3)

    同样是上一个例子,我们要求并非实时的计算结果,而是等到用户确定自己已经输入完毕,然后进行计算: <!DOCTYPE html> <html ng-app> <head&g ...

  2. angular学习笔记(五)-阶乘计算实例(2)

    <!DOCTYPE html> <html ng-app> <head> <title>2.3.3计算阶乘实例2</title> <m ...

  3. tensorflow学习笔记五:mnist实例--卷积神经网络(CNN)

    mnist的卷积神经网络例子和上一篇博文中的神经网络例子大部分是相同的.但是CNN层数要多一些,网络模型需要自己来构建. 程序比较复杂,我就分成几个部分来叙述. 首先,下载并加载数据: import ...

  4. input子系统学习笔记六 按键驱动实例分析下【转】

    转自:http://blog.chinaunix.net/uid-20776117-id-3212095.html 本文接着input子系统学习笔记五 按键驱动实例分析上接续分析这个按键驱动实例! i ...

  5. Typescript 学习笔记五:类

    中文网:https://www.tslang.cn/ 官网:http://www.typescriptlang.org/ 目录: Typescript 学习笔记一:介绍.安装.编译 Typescrip ...

  6. ArcGIS案例学习笔记-中国2000坐标转换实例

    ArcGIS案例学习笔记-中国2000坐标转换实例 联系方式:谢老师,135-4855-4328,xiexiaokui#qq.com 目的:西安1980.中国2000.WGS84(GPS)等任意坐标系 ...

  7. angular学习笔记(三十一)-$location(2)

    之前已经介绍了$location服务的基本用法:angular学习笔记(三十一)-$location(1). 这篇是上一篇的进阶,介绍$location的配置,兼容各版本浏览器,等. *注意,这里介绍 ...

  8. angular学习笔记(三十)-指令(10)-require和controller

    本篇介绍指令的最后两个属性,require和controller 当一个指令需要和父元素指令进行通信的时候,它们就会用到这两个属性,什么意思还是要看栗子: html: <outer‐direct ...

  9. angular学习笔记(三十)-指令(7)-compile和link(2)

    继续上一篇:angular学习笔记(三十)-指令(7)-compile和link(1) 上一篇讲了compile函数的基本概念,接下来详细讲解compile和link的执行顺序. 看一段三个指令嵌套的 ...

随机推荐

  1. android:View的setTag和getTag使用

    1.用于区分非常多类似的View 比如: button1.setOnClickListener(new OnClickListener ... ); button2.setOnClickListene ...

  2. UVa 10642 - Can You Solve It?

    题目:二维平面上的整数点.用路径链接起来(0,0)->(1.0)->(0.1)->(2,0)->.. 给你两点坐标.求两点间步长(在路径上的距离). 分析:简单题. 我们发现点 ...

  3. vue 子组件引用

    使用 ref 为子组件指定一个引用 ID.例如: <div id="parent"> <user-profile ref="profile"& ...

  4. 除掉inline-block 间距

    1.现象: <!doctype html> <html lang="en"> <head> <meta charset="UTF ...

  5. ModelAndView 配置与使用

    一,ModelAndView 介绍: 1)ModelAndView 用于后台与前端页面交互: 2)可以用于重定向与转发到指定页面, 3)可以保存数据然后渲染到页面 二,使用: 1)在Controlle ...

  6. iOS任何界面全屏炫酷倒计时,一句代码就够了

    概述 iOS全屏炫酷倒计时,任何界面只需要调用一句代码就能实现,支持定制倒计时数字.倒计时结束时显示的文本.支持倒计时播放图片.开始倒计时和结束倒计时的block和delegate回调.支持定制文本颜 ...

  7. HDUOJ----4504 威威猫系列故事——篮球梦

    威威猫系列故事——篮球梦 Time Limit: 300/100 MS (Java/Others)    Memory Limit: 65535/32768 K (Java/Others)Total ...

  8. cxGrid显示行号

    定义一个类: TMyCxGrid = class(TObject) class procedure DrawIndicatorCell( Sender: TcxGridTableView; ACanv ...

  9. iOS NSString去除其他字符(空格回车符)

    很多时候大家都需要对字符串进行处理.现在就对字符串删掉特殊字符的处理进行总结一下. 1.stringByTrimmingCharactersInSet  这个方法只能对字符串前后两个部分的特殊字符进行 ...

  10. Error_OAF_Flex VO() of flex bean (ExpenseDescFlexs) is null (异常)

    2014-06-17 BaoXinjian