轉載出處：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)