angularjs之购物金额计算
2016-09-18 21:55
465 查看
angularjs之购物金额计算
当我们用js或者jquery进行购物车金额计算的时候会非常麻烦,今天,我们用angularjs一种新的方法进行购物车总额的计算.代码如下:
<!DOCTYPE html>
<html ng-app>
<head>
<meta charset="UTF-8">
<title>angular</title>
</head>
<body ng-controller="sum">
价格:<input type="text" ng-model="cup.price">
<br/><br/>
数量:<input type="text" ng-model="cup.count">
<p>运费:{{cup.fee|currency:"¥"}}</p>
<p>总金额:{{all()|currency:"¥"}}</p><!-- 过滤器currency -->
</body>
<script src="angular.min.js"></script>
<script>
// 购物金额计算
function sum($scope){
$scope.cup={
"price":12,
"count":1,
"fee":20
}
$scope.all=function(){
return $scope.cup.price*$scope.cup.count;
}
// $watch
// 监听变化
// 有三个参数
// 1.函数或属性
// 2.callback
// 3.true深度监听
$scope.$watch("all()",function(nval, oval){
//console.log(nval+":"+oval);
if(nval<100){
$scope.cup.fee=20;
}
else{
$scope.cup.fee=0;
}
},true)
$scope.$watch("cup.count",function(nval, oval){
//console.log(nval+":"+oval);
if(nval<1){
$scope.cup.fee=0;
}
},true)
}
</script>
<script>
</script>
</html>
当我们用js或者jquery进行购物车金额计算的时候会非常麻烦,今天,我们用angularjs一种新的方法进行购物车总额的计算.代码如下:
<!DOCTYPE html>
<html ng-app>
<head>
<meta charset="UTF-8">
<title>angular</title>
</head>
<body ng-controller="sum">
价格:<input type="text" ng-model="cup.price">
<br/><br/>
数量:<input type="text" ng-model="cup.count">
<p>运费:{{cup.fee|currency:"¥"}}</p>
<p>总金额:{{all()|currency:"¥"}}</p><!-- 过滤器currency -->
</body>
<script src="angular.min.js"></script>
<script>
// 购物金额计算
function sum($scope){
$scope.cup={
"price":12,
"count":1,
"fee":20
}
$scope.all=function(){
return $scope.cup.price*$scope.cup.count;
}
// $watch
// 监听变化
// 有三个参数
// 1.函数或属性
// 2.callback
// 3.true深度监听
$scope.$watch("all()",function(nval, oval){
//console.log(nval+":"+oval);
if(nval<100){
$scope.cup.fee=20;
}
else{
$scope.cup.fee=0;
}
},true)
$scope.$watch("cup.count",function(nval, oval){
//console.log(nval+":"+oval);
if(nval<1){
$scope.cup.fee=0;
}
},true)
}
</script>
<script>
</script>
</html>
相关文章推荐
- angularJs小应用----计算购物金额-动态改变邮费
- angularjs实现的购物金额计算工具示例
- 5、购物金额的计算-----满100包邮
- AngularJs购物车删除和计算总金额
- AngularJs购物车删除和计算总金额
- angularJs-购物金额实例操作
- js中进行金额计算
- 货币金额的计算 - Java中的BigDecimal
- Java关于金额计算的选择方案
- javascript小项目:购物页面的全选和金额总计功能
- oracle 月销售总金额的累加计算,实现 n = (n-1) + (n-2)
- js金额计算解决精度问题
- JS-------------------计算小计金额和总计金额
- 第八周项目2-计算定期还款金额
- ExtJs框架之Form中自动计算总金额
- [python计算金额]decimal常用操作
- 18.升级我行我素购物管理系统,实现按会员积分计算会员折扣
- Java工具类之——BigDecimal运算封装(包含金额的计算方式)
- vb计算纳税金额
- 牛腩购物网30:用户中心其他功能制作(获取购物的总金额,判断用户是 普通会员还是VIP会员,用户申请VIP)