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

<!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. Hibernate(十二)Criteria查询

    一.简述 Criteria是一种比hql更面向对象的查询方式.Criteria 可使用 Criterion 和 Projection 设置查询条件.可以设置 FetchMode(联合查询抓取的模式 ) ...

  2. Hibernate(十)HQL查询二

    一.数据库的emp名和dept表 建立持久化类和配置文件,可以用MyEclipse直接生成 持久化类 package entity; import java.util.Date; public cla ...

  3. taro 在components文件夹中 新建组件时，组件支持自定义命名，但是不能大写开头

    在components文件夹中 新建组件时,组件支持自定义命名,但是不能大写开头.否则会报错 错误写法: // 真实路径 import MinaMask from '../../components/ ...

  4. 【Accountancy】资产

    1. 资产定义 资产是指企业过去的交易或事项形成的.由企业拥有或控制的.预期会给企业带来经济利益的资源. 2. 资产分类 2.1 货币资金 概念 货币资金是指企业生产经营过程中处于货币形态的资产,包括 ...

  5. Zuul使用Ribbon配置自动重试

    spring cloud的版本不断演进,导致很多配置的配置方式不断改变,有时某个配置在一个版本里面默认是true,后边一升级默认成了false,这点让人有点不爽. 言归正传 0.所使用版本 sprin ...

  6. iOS-高仿通讯录之商品索引排序搜索

    概述 TableView添加右侧索引, 将数据按照索引分组排序, 并添加搜索功能且在搜索界面复用当前页面. 详细 代码下载:http://www.demodashi.com/demo/10696.ht ...

  7. Everything:速度最快的文件名搜索工具

    http://xbeta.info/everything-search-tool.htm Everything(官网|中文主页|教程)是速度最快的文件名搜索软件.其速度之快令人震惊,百G硬盘几十万个文 ...

  8. Google map API V3

    本文主要总结Google map API V3使用中最简单也是最常见的一些操作以及相关概念,如果需要更加详细的信息,请直接阅读Google提供的关于map的文档. google map api v3文 ...

  9. 避免全表扫描的sql优化

    对查询进行优化,应尽量避免全表扫描,首先应考虑在where 及order by 涉及的列上建立索引:  .尝试下面的技巧以避免优化器错选了表扫描: ·   使用ANALYZE TABLE tbl_na ...

  10. iOS - App 间的通信方式

    1.前言 iOS 系统是相对封闭的系统,App 各自在各自的沙盒(sandbox)中运行,每个 App 都只能读取 iPhone 上 iOS 系统为该应用程序程序创建的文件夹 AppData 下的内容 ...