简单的angular购物车商品小计

<!DOCTYPE html>
<html lang="en" ng-app="shopApp">
<head>
    <meta charset="UTF-8">
    <title>angular购物车小计</title>
    <script src="angular.min.js"></script>
    <script>
        //angular的模块化,模块名是ng-app定义的模块名,ng-app='模块名'是指定从哪个模块开始初始化
        var shopApp=angular.module('shopApp',[]);
        //angular的写法是shopApp.controller('函数名',function($scope){});,但是这种写法在压缩代码的时候会改变参数$scope,导致angular不识别这个被改变的参数
        shopApp.controller('shopCar',['$scope',function($scope){
            //在$scope上定义一个变量,使用json来存储需要使用的数据
            $scope.phone={
                price:1299,
                num:1,
                fre:5
            };
            //同样的再$scope上也可以添加求和方法,并返回到需要的数据中,在angular中方法作用域变量会优先找自己作用域中的变量值,如果找不到会一级一级的往上找
            $scope.sum=function(){
                return $scope.phone.price * $scope.phone.num;
            };
            //监听运费的实时变化,当购物金额大于5000元的时候免运费,当购物金额小于5000元的时候运费为10元
            $scope.$watch($scope.sum,function(newVal,oldVal){
                $scope.phone.fre=newVal >=5000 ? 0 : 10 ;
            },true);
        }]);
    </script>
</head>
<body>
    <div ng-controller="shopCar">
        <p>价格:<input type="text" ng-model="phone.price"></p>
        <p>个数:<input type="text" ng-model="phone.num"></p>
        <p>商品总价:<span>{{sum() | currency:''}}</span></p>
        <p>运费合计:<span>{{phone.fre | currency:''}}</span></p>
        <p>总计:<span>{{sum() + phone.fre | currency:''}}</span></p>
    </div>
</body>
</html>

 

posted @ 2016-12-04 12:16  Jason齐齐  阅读(986)  评论(0编辑  收藏  举报