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

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

<!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)