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

<!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. 微信小程序 - 上拉加载下拉刷新

    点击下载示例:小程序 - 上拉刷新下拉加载

  2. Java从零开始学八(循环结构)

    一.循环结构 循环结构则是根据判断条件的成立与否,决定程序段落的执行次数,而这个程序段落就称为循环主体.

  3. PyQt5教程——组件（7）

    PyQt5中的组件(widgets) 组件(widgets)是构建一个应用的基础模块.PyQt5有广泛的各式各样的组件,包含按钮,复选按钮,滑块条,和列表框.在这个部分的教程中,我们将学习几种有用的组 ...

  4. hadoop MultipleInputs fails with ClassCastException （get fileName）

    来自:http://stackoverflow.com/questions/11130145/hadoop-multipleinputs-fails-with-classcastexception F ...

  5. 浅析MySQL各种索引

    MySQL各种索引(由于是浅析大多都不刻意区分搜索引擎) INDEX(普通索引):最主要的索引.没有不论什么限制 ALTER TABLE `table_name` ADD INDEX index_na ...

  6. 修改终端下vim的PopupMenu选种项的背景颜色

    我平常比较喜欢使用终端下的 VIM,最方便的就是随时可以使用ctrl+z切换到终端下执行命令, 然后再通过fg切换回 VIM.如果再有个透明效果,那就更赞了.不过最近换了一个配色ron 后, 有个比较 ...

  7. 【实践】源代码分析工具Doxygen+Graphviz

    拿到一个新项目或者一个开源框架,看源代码的方式不是先进行单步调试!最好的方式是先画出整个项目或者开源框架的类.协作.已经方法调用图,能够帮助你更快的理解框架或者项目的设计. 打包下载地址:http:/ ...

  8. FFmpeg基础库编程开发学习笔记——视频常见格式

    声明一下:这些关于ffmpeg的文章仅仅是用于记录我的学习历程和以便于以后查阅,文章中的一些文字可能是直接摘自于其它文章.书籍或者文献,学习ffmpeg相关知识是为了使用在Android上,我也才是刚 ...

  9. Java中网络相关API的应用——InetAddress&URL

    一.InetAddress类 标识网络上的硬件资源 package com.homework; import java.net.InetAddress; import java.net.Unknown ...

  10. MSSQL-SQL SERVER还原与备份(导入与导出)

    备份: 使用Microsoft SQL Server Management Studio查询出想要的列和结果, 在结果处左上角点击, 软件会自动选中查询出的所有结果, 然后右键"将结果另存为 ...