Angularjs监听事件$watch

最新推荐文章于 2023-07-13 13:32:18 发布

氏张

最新推荐文章于 2023-07-13 13:32:18 发布

阅读量728

点赞数

分类专栏：初步学习文章标签： Angularjs

初步学习专栏收录该内容

20 篇文章 0 订阅

订阅专栏

<body ng-app="app">
    <section ng-controller="myCtrl">
        单价：<input type="text" maxlength="5" οnkeyup="value=value.replace(/[^\d]/g,'')" placeholder="请输入数字" ng-model="shop.money" />
        数量：<input type="text" ng-model="shop.count" />
        运费：{{shop.fre}}
        <br />

        <p>总价：{{total() + shop.fre | currency:'￥' }}</p>
    </section>
</body>
</html>
<script src="js/angular.min.js"></script>
<script>
    var myapp = angular.module("app", []);
    myapp.controller('myCtrl', ["$scope", function ($scope) {
        $scope.shop = {
            money: "",
            count: "",
            fre: 10
        };
        $scope.total = function () {
            return $scope.shop.money * $scope.shop.count;
        }
        //$watch 接收3个参数，前两个是必选的，第一个为监听的对象或者属性,也可以监听一个函数，第二个为被监听对象或者属性变化时的回调，第三个为true，表示深度监听
        //当为true的时候监听的第一个为对象时，对象的某个属性发生改变也会监听到并触发回调，没写默认false对象某个属性发生改变不会触发回调
        //回调参数接收3个参数，第一个为新值，第二个为旧值,前面监听的是什么回调里的就是前面监听的对象或者属性或者函数
        $scope.$watch('shop', function (newVal, oldVal) {
            //if (newVal.money.length > 4) {
            //    alert("长度为4")
            //}
            //if()
            console.log(newVal.money);
            console.log(newVal.count);

        }, true);
    }]);
</script>