同样是上一个例子,我们要求并非实时的计算结果,而是等到用户确定自己已经输入完毕,然后进行计算:

<!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)的更多相关文章

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

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

  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. 项目重命名&复制项目&删除项目

          项目重命名&复制项目&删除项目 CreateTime--2016年10月15日17:25:43 Author:Marydon 1.修改项目名或者复制的项目名 第一步: my ...

  2. Google Volley框架之https请求

    先插一句.Google出的volley框架本身是支持https请求的,可是仅仅是针对有第三方机构认证过的. 假设自己随便在网上搞的一个证书,那volley是不支持请求的. 本文讲下怎样让volley支 ...

  3. android.webkit.WebView/WebViewClient/WebChromeClient

    使用android.webkit.WebView控件 在xml布局文件中定义 <WebView   android:id="@+id/webkit01"   android: ...

  4. （二）Linux Shell编程——运算符、注释

    2.7 Shell运算符 Bash 支持很多运算符,包括算数运算符.关系运算符.布尔运算符.字符串运算符和文件测试运算符.原生bash不支持简单的数学运算,但是可以通过其他命令来实现,例如 awk 和 ...

  5. HDUOJ-----2571跳舞毯

    跳舞毯 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submiss ...

  6. C++知识整理(进制)

    ++输出二进制.十进制.八进制和十六进制总结 分类: C++ 2013-01-14 02:26 592人阅读 评论(0) 收藏 举报 在C++中,默认状态下,数据按十进制输入输出.如果要求按八进制或十 ...

  7. c语言格式大整理

    1.C语言中,非零值为真,真用1表示:零值为假,假用0表示. 2.转义字符参考: \a 蜂鸣,响铃 \b 回退:向后退一格 \f 换页 \n 换行 \r 回车,光标到本行行首 \t 水平制表 \v 垂 ...

  8. Oracle实例

    ORA-12505 Listener refused the connection with following error:ORA-12505,TNS:listener 确定这是连接数据库的SID错 ...

  9. JSP开发中对jstl的引用方式(标签库引用)

    创建标签库引用文件taglibs.inc 一 采用本地标签库的taglibs.inc文件 <%--struts库标签 --%> <%@ taglib uri="/WEB-I ...

  10. 【js】appendChild

    appendChild主要是用来追加节点插入到最后:循环的时候由于不停的搬家导致length在改变.     使用for循环 <!Doctype html> <html xmlns= ...