angular.js学习笔记:实现商品价格计算实例

<!DOCTYPE html>
<html lang="en" ng-app>   <!-- ng-app:初始化的指令 也可以解析局部-->
<meta charset="UTF-8">
<title>Document</title>
<script src='angular.min.js'></script>
<script type="text/javascript">

function Aaa($scope){
    $scope.apple = {                     //M:Model  数据
        money : 100,
        num : 5,
        fre : 10,
    };

    $scope.sum = function(){
        return $scope.apple.money*$scope.apple.num;
    }

    $scope.$watch('sum()',function(newVal,oldVal){     //监听函数
        $scope.apple.fre = newVal>=100 ? 0:10;
    })

};

</script>
</head>
<body>

<div ng-controller="Aaa">                                            <!-- C:Controller 控制器:链接数据和视图的一个桥梁-->
    <p>单价:<input type="text" ng-model='apple.money' /></p>        <!-- 将输入框的内容和数据绑定在一起   这是MVVM数据双向绑定中的VM(视图影响数据) -->
    <p>数量:<input type="text" ng-model='apple.num' /></p>
    <p>运费:<span>{{apple.fre | currency:'¥'}}</span></p>            <!-- V:View  视图-->
    <p>总价:<span>{{sum() + apple.fre | currency:'¥'}}</span></p>
</div>

</body>
</html>

 

posted @ 2017-02-10 17:30  雨水一盒~  阅读(502)  评论(0编辑  收藏  举报