AngularJS(五)阶乘实例2

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


复制代码
<!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: 被监测的内容发生改变后调用的回调

--------------------------------------------------------------------------------------------------------------------------------------------

注意,如果是字符串格式,不需要写$scope,比如这里的factorial.number,但如果是变量格式,则必须传入$scope,如$scope.$watch($scope.factorial.number,$scope.compute)

 


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章