AngularJS（五）阶乘实例3

来源：互联网发布：磐海数据有限公司编辑：程序博客网时间：2024/05/22 09:40

转载出处：http://www.cnblogs.com/liulangmao/p/3715547.html

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

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

阅读全文

0 0