4、$watch的用法-蒲公英云

4、$watch的用法

1、$watch的用法

  1.1 利用$watch来观察对象属性数值的变化
        1.用$watch来观察,iphone.money的改变  
        2.用iphone.money表示,而不是$scope.iphone.money
        3.要加单引号'iphone.money' 
        4.代码
<!DOCTYPE html>
<html ng-app>
    <head>
        <meta charset="UTF-8">
        <title>购物金额的计算</title>
        <script type="text/javascript" src="../js/angular.min.js"></script>
        <script type="text/javascript">
            function Aaa($scope) {
                $scope.iphone = {
                    money: 5,
                    num: 1,
                    fre: 10
                }
                $scope.sum = function() {
                        return $scope.iphone.money * $scope.iphone.num;
                    }
                    /*用$watch来观察,iphone.money的改变*/
                    /*1、用iphone.money表示,而不是$scope.iphone.money
                      2、要加单引号'iphone.money'
                     * */
                $scope.$watch('iphone.money', function(newVal, oldVal) {
                    console.log(newVal);
                    console.log(oldVal);
                });
            }
        </script>
    </head>
    <body>
        <div ng-controller="Aaa">
            <p>价格:<input type="text" ng-model="iphone.money" /></p>
            <p>个数:<input type="text" ng-model="iphone.num" /></p>
            <p>费用:<span>{
   {sum() | currency:"￥"}}</span></p>
        </div>
    </body>
</html>
     1.2 利用 $watch来观察对象的变化
           1.用$watch来观察,iphone的改变
           2.用iphone表示,而不是$scope.iphone
           3.要加单引号'iphone'
           4.第三个参数要为true
           5.代码
<!DOCTYPE html>
<html ng-app>
    <head>
        <meta charset="UTF-8">
        <title>购物金额的计算</title>
        <script type="text/javascript" src="../js/angular.min.js"></script>
        <script type="text/javascript">
            function Aaa($scope) {
                $scope.iphone = {
                    money: 5,
                    num: 1,
                    fre: 10
                }
                $scope.sum = function() {
                        return $scope.iphone.money * $scope.iphone.num;
                    }
                    /*用$watch来观察,iphone的改变*/
                    /*1、用iphone表示,而不是$scope.iphone
                      2、要加单引号'iphone'
                      3、第三个参数要为true
                     * */
                $scope.$watch('iphone', function(newVal, oldVal) {
                    console.log(newVal);
                    console.log(oldVal);
                }, true);
            }
        </script>
    </head>
    <body>
        <div ng-controller="Aaa">
            <p>价格:<input type="text" ng-model="iphone.money" /></p>
            <p>个数:<input type="text" ng-model="iphone.num" /></p>
            <p>费用:<span>{
   {sum() | currency:"￥"}}</span></p>
        </div>
    </body>
</html>
      1.3 利用 $watch来观察函数返回数值的变化
        1.用$watch来观察,$scope.sum函数返回数值的改变  
        2.用$scope.sum表示  
        3.不要加单引号,$scope.sum  
        4.代码
<!DOCTYPE html>
<html ng-app>
    <head>
        <meta charset="UTF-8">
        <title>购物金额的计算</title>
        <script type="text/javascript" src="../js/angular.min.js"></script>
        <script type="text/javascript">
            function Aaa($scope) {
                $scope.iphone = {
                    money: 5,
                    num: 1,
                    fre: 10
                }
                $scope.sum = function() {
                        return $scope.iphone.money * $scope.iphone.num;
                    }
                    /*用$watch来观察,$scope.sum函数返回数值的改变*/
                    /*1、用$scope.sum表示
                      2、不要加单引号,$scope.sum
                     * */
                $scope.$watch($scope.sum, function(newVal, oldVal) {
                    console.log(newVal);
                    console.log(oldVal);
                });
            }
        </script>
    </head>
    <body>
        <div ng-controller="Aaa">
            <p>价格:<input type="text" ng-model="iphone.money" /></p>
            <p>个数:<input type="text" ng-model="iphone.num" /></p>
            <p>费用:<span>{
   {sum() | currency:"￥"}}</span></p>
        </div>
    </body>
</html><span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);">     </span>