<!DOCTYPE html>

<html ng-app>

<head>

  <title>2.3.3计算阶乘实例2</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"/>

      的阶乘结果是:

      <span>{{factorial.result}}</span>

    </form>

  </div>

</body>

</html>

同样是这个例子:

result的改变,本质上是由于number的改变,而不是input的value值改变,number的改变有可能是input的value值改变,也有可能其它input也绑定了number,也有可能后台的数据发生了改变,

因此,不使用input的ng-change属性来绑定计算result的回调,而是监测number的改变,一旦number发生改变,就实时计算result,并在ui上显示.

可以使用$watch:

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.$watch('factorial.number',$scope.compute)

}

$watch(参数1,参数2):

参数1: 被监测的内容,字符串格式,这个字符串中的内容可以是一个表达式,也可以是$scope中的属性,在后面会详细讲解表达式

参数2: 被监测的内容发生改变后调用的回调

--------------------------------------------------------------------------------------------------------------------------------------------

注意,如果是字符串格式,不需要写$scope,比如这里的factorial.number,但如果是变量格式,则必须传入$scope,如$scope.$watch($scope.factorial.number,$scope.compute)

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

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

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

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

    <!DOCTYPE html> <html ng-app> <head> <title>2.3.2计算阶乘实例1</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. 微信小程序 - 更改radio和checkbox选中样式

    点击下载源码:示例-更改radio或checkbox选中样式

  2. which命令(转)

    原文:http://www.cnblogs.com/peida/archive/2012/11/08/2759805.html 我们经常在linux要查找某个文件,但不知道放在哪里了,可以使用下面的一 ...

  3. Spring AOP深入理解之拦截器调用

    Spring AOP深入理解之拦截器调用 Spring AOP代理对象生成回想 上一篇博客中:深入理解Spring AOP之二代理对象生成介绍了Spring代理对象是怎样生成的,当中重点介绍了JDK动 ...

  4. yum安装MangoDB

    1:操作系统信息 2:yum命令查看MongoDB的包信息 3:配置yum源 #vi /etc/yum.repos.d/10gen.repo 4:查看mongoDB的服务器包的信息 5:安装Mongo ...

  5. JVM中类的卸载机制

    类的生命周期 当Sample类被载入.连接和初始化后,它的生命周期就開始了. 当代表Sample类的Class对象不再被引用,即不可触及时,Class对象就会结束生命周期.Sample类在方法区内的数 ...

  6. maven 配置环境变量

      maven 环境变量配置 CreationTime--2018年6月4日18点45分 Author:Marydon 前言 要先运行maven,需要按安装并配置jdk,没有配置的见文末推荐. 1.m ...

  7. TRIZ系列-创新原理-25-自服务原理

    自服务原理的详细表述例如以下:1)物体在实施辅助和维修操作时.必须能自我服务:2)利用废弃的材料和能量: 自服务原理的第1)个比較好理解,假设一个系统在执行过程中须要进行辅助和维护操作时,最好不要借助 ...

  8. python之函数用法__str__()

    # -*- coding: utf-8 -*- #python 27 #xiaodeng #python之函数用法__str__() #http://www.cnblogs.com/hongfei/p ...

  9. Scala进阶之App特质

    App特质的作用 App特质的作用那就是延迟初始化,从代码上看它继承自DelayedInit,里面有个delayedInit方法 trait App extends DelayedInit Delay ...

  10. Fiddler 中请求时间的显示列

    在Tool bar上面找到 Rules->CustomRules 在class Handlers{   里面添加 //----------------------------显示请求时间,显示毫 ...