angular學習筆記(五)-階乘計算例項(2)

詩&遠方發表於2014-05-08
Angular筆記
<!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)

 

 

 

相關文章