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

最新推荐文章于 2024-09-09 09:35:48 发布

weixin_30693183

最新推荐文章于 2024-09-09 09:35:48 发布

阅读量79

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/angelatian/p/6387326.html

版权

<!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>