<!DOCTYPE html> <html ng-app> <head> <title>2.3.2计算阶乘实例1</title> <meta charset="utf-8"> <script src="../angular.js"></script> <script src="script.js"></script> </head> <body> <div ng-controller = 'Factorial'> <form action=""> <input type="text" ng-model="factorial.number" ng-change="compute()"/> 的阶乘结果是: <span>{{factorial.result}}</span> </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); } }
1.ng-model:
将input元素与factorial.number进行绑定
2.ng-change:
给input元素的change事件绑定回调函数为compute方法
3.{{factorial.result}}
compute方法会通过factorial.number的值计算factorial.result的值,然后factorial.result的值是和ui进行绑定的.所以,input的value值改变时,span中相应的值也会改变