<!DOCTYPE html>
<html ng-app>
<head>
<title>2.3.3计算阶乘实例2</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"/>
的阶乘结果是:
<span>{{factorial.result}}</span>
</form>
</div>
</body>
</html>
同样是这个例子:
result的改变,本质上是由于number的改变,而不是input的value值改变,number的改变有可能是input的value值改变,也有可能其它input也绑定了number,也有可能后台的数据发生了改变,
因此,不使用input的ng-change属性来绑定计算result的回调,而是监测number的改变,一旦number发生改变,就实时计算result,并在ui上显示.
可以使用$watch:
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.$watch(‘factorial.number‘,$scope.compute)
}
$watch(参数1,参数2):
参数1:
被监测的内容,字符串格式,这个字符串中的内容可以是一个表达式,也可以是$scope中的属性,在后面会详细讲解表达式
参数2: 被监测的内容发生改变后调用的回调
--------------------------------------------------------------------------------------------------------------------------------------------
遗留问题:
$watch中,第一个参数不需要写$scope.factorial.number,而第二个参数则必须写$scope.compute,原因不详
angular学习笔记(五)-阶乘计算实例(2)
时间： 2024-12-25 09:50:15