AngularJS - Watch 监听对象

最新推荐文章于 2022-06-17 17:31:07 发布

weixin_34290000

最新推荐文章于 2022-06-17 17:31:07 发布

阅读量82

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/MarchThree/p/5353243.html

版权

<body>
    <div ng-app="myApp">

        <div ng-controller="firstController">
            <p>价格:<input type="text" ng-model="iphone.money"></p>
            <p>个数:<input type="text" ng-model="iphone.num"></p>
            <p>费用:<span>{{ sum() | currency:'￥' }}</span></p>
            <p>运费:<span>{{iphone.fre | currency:'￥'}}</span></p>
            <p>总额:<span>{{ sum() + iphone.fre | currency:'￥'}}</span></p>
        </div>
    </div>
    <script type="text/javascript">
        var app = angular.module("myApp", []);
         
          app.controller('firstController', ['$scope', function ($scope) {
              //对象定义
              $scope.iphone = {
                  money: 5,
                  num: 1,
                  fre: 10
              };

              //计算总量和个数
              $scope.sum = function () {
                  return $scope.iphone.money * $scope.iphone.num;
              }
              //如果总价大于100，运费变成0  可以监听函数，也可以直接监听对象属性
              $scope.$watch($scope.sum,function (newValue,oldValue) {

                  $scope.iphone.fre = newValue >= 100 ? 0 : 10;

              });

          }]);
         
    </script>

</body>