<!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. position sticky 定位

    1.兼容性 https://caniuse.com/#search=sticky chrome.ios和firefox兼容性良好. 2.使用场景 sticky:粘性.粘性布局. 在屏幕范围内时,元素不 ...

  2. 解决Failure to transfer org.apache.maven.plugins:maven-surefire-plugin:pom:2.12.4

    Failure to transfer org.apache.maven.plugins:maven-surefire-plugin:pom:2.12.4 from http://uk.maven.o ...

  3. vmwear虚拟机Ubuntu设置桥接（Bridged）

    近期遇上大数据的实验课,须要搭建hadoop的实验环境,所以和舍友组队搭环境,因为感觉双系统没有虚拟机方便,所以我安装的Ubuntu的虚拟机,舍友安装的双系统.可是在将我的Ubuntu虚拟机连接到与舍 ...

  4. 别人的spring学习入门笔记

    http://elf8848.iteye.com/blog/875830  可以做入门参考,英语好可以阅读spring的spring-framework-reference 更多学习blog http ...

  5. 兼顾pc和移动端的textarea字数监控的实现方法

    概述 pc端移动端中文本框监控字数的功能的一种较为简单的实现,考虑到安卓和IOS输入法输入过程中是否触发keyup的差异.利用监听compositionstart判断是否开启了输入法.从而实现体验较为 ...

  6. Linux内核源代码分析方法

    Linux内核源代码分析方法   一.内核源代码之我见 Linux内核代码的庞大令不少人"望而生畏",也正由于如此,使得人们对Linux的了解仅处于泛泛的层次.假设想透析Linux ...

  7. maven内部运行原理解析(一)

    来源于:http://www.jianshu.com/p/0fb5e3fb704d maven至今还是Java编程语言构建的事实标准,大部分项目还在使用maven来进行构建,因此了解maven内部运行 ...

  8. reindex-maven 私服（nexus）架设以及项目管理中遇到的问题及解决方案(updating)

    ---    用maven 的过程中 大问题小问题实在是不少 ,就不一篇文章一篇文章的写了,干脆写在一起 ---- -------  nexus 加索引 点击Administration菜单下面的Re ...

  9. HDUOJ------(1230)火星A+B

    火星A+B Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Submi ...

  10. Android学习系列(3)--App自动更新之自定义进度视图和内部存储

    友好的视觉感知和稳定的不出错表现,来自于我们追求美感和考虑的全面性,博客园从技术的角度,一直我都很欣赏.这篇文章是android开发人员的必备知识,是我特别为大家整理和总结的,不求完美,但是有用. 这 ...