码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2014-05-08 18:28:03      阅读:295      评论:0      收藏:0      [点我收藏+]

标签:style   blog   class   code   java   ext   

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

bubuko.com,布布扣
<!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>
bubuko.com,布布扣

我们给它添加两个按钮,一个用于确认计算,一个用于清空计算.

然后给表单提交和点击重置分别绑定回调:

bubuko.com,布布扣
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;
    };
}
bubuko.com,布布扣

去掉了$watch对factorial.number的监测,而是在表单被提交的时候才进行计算,然后点击重置的时候,将number和result进行重置

angular对dom元素绑定事件的规则如下:

onclick  ---  ng-click

ondblclick  ---   ng-dblclick

...

*其实两个button都是会触发form的提交事件的.
*比较好的方法是把compute()写在计算button的ng-click里,这里仅作演示ng-submit

 

angular学习笔记(五)-阶乘计算实例(3),布布扣,bubuko.com

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

标签:style   blog   class   code   java   ext   

原文地址:http://www.cnblogs.com/liulangmao/p/3715547.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!