本文实例讲述了angularjs实现的购物金额计算工具。分享给大家供大家参考,具体如下:
当我们用js或者jquery进行购物车金额计算的时候会非常麻烦,今天,我们用angularjs一种新的方法进行购物车总额的计算。代码如下:
& lt; !DOCTYPE html>
& lt; html ng-app>
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt; title> www.jb51.net角购物金额计算器& lt;/title>
& lt;/head>
& lt;身体ng-controller="和"比;
价格:& lt; input type=" text " ng-model=癱up.price”比;
& lt; br/祝辞& lt; br/比;
数量:& lt; input type=" text " ng-model=癱up.count”比;
& lt; p>运费:{{cup.fee |货币:“円”}}& lt;/p>
& lt; p>总金额:{{所有()|货币:“円”}}& lt;/p> & lt; !——过滤器货币——比;
& lt;/body>
& lt;脚本src=" https://www.yisu.com/zixun/angular.min.js "祝辞& lt;/script>
& lt; script>//购物金额计算
函数之和(美元范围){
$ scope.cup={
“价格”:12,
“数”:1、
“费”:20
}
$ scope.all=function () {
返回scope.cup.price * scope.cup.count美元;
}//看美元//监听变化//有三个参数//1 .函数或属性//2.回调//3.真正深度监听
范围。看美元(“所有()”,函数(造船、椭圆形){//console.log(造船+“:”+椭圆形);
如果(nval<100) {
scope.cup.fee=20美元;
}
其他{
美元scope.cup.fee=0;
}
},真的)
范围。看美元(“杯。数”,函数(造船、椭圆形){//console.log(造船+“:”+椭圆形);
如果(nval<1) {
美元scope.cup.fee=0;
}
},真的)
}
& lt;/script>
& lt; script>
& lt;/script>
& lt;/html>
之前
运行效果:
http://tools.jb51.net/jisuanqi/touzilicai_calc
http://tools.jb51.net/jisuanqi/cunkuan_calc
http://tools.jb51.net/jisuanqi/jsqkexue
http://tools.jb51.net/jisuanqi/jsq
更多关于AngularJS相关内容感兴趣的读者可查看本站专题:《AngularJS指令操作技巧总结》,《AngularJS入门与进阶教程》及《AngularJS MVC架构总结》
希望本文所述对大家AngularJS程序设计有所帮助。
