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