本文实例讲述了角实现可删除并计算总金额的购物车功能。分享给大家供大家参考,具体如下:
先看运行效果:
具体代码如下:
& lt; !DOCTYPE html>
& lt; html lang=癳n”比;
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt; title> www.jb51.net角可删除与计算总额的购物车& lt;/title>
& lt;脚本src=" https://www.yisu.com/zixun/angular.min.js "祝辞& lt;/script>
& lt; style>
表{
宽度:500 px;
身高:300 px;
border-collapse:崩溃;
text-align:中心;
}
td {
边界:1 px固体黑色;
}
& lt;/style>
& lt; script>
var myapp=angular.module (“myapp”, []);
myapp。控制器(“myCtrl”功能(范围美元){
$ scope.goods=[{
gname:“iphone8”,
num:“3”,
价格:“999”
}，{
gname:“iphone7”,
num:“4”,
价格:“599”
}，{
gname:“iphone6”,
num:“5”,
价格:“499”
}，{
gname:“iphone5”,
num:“6”,
价格:“399”
}
];
美元的范围。allSum=function () {
var allPrice=0;
(var i=0; i< scope.goods.length美元;我+ +){
allPrice +=$ scope.goods[我].price *美元scope.goods[我].num;
}
返回allPrice;
}；
美元的范围。删除=函数(指数){
如果确认(“确定移除此项嘛?”)){
美元scope.goods.splice(指数(1);
}
如果($ scope.goods.length==0) {
改变(“你的购物车为空的);
}
}；
})
& lt;/script>
& lt;/head>
& lt;身体ng-app=ng-controller“myapp”=癿yCtrl”比;
& lt; table>
& lt; tr>
& lt; td colspan=?”在你的购物车& lt;/td>
& lt; tr>
& lt; td>商品名称& lt;/td>
& lt; td>数量& lt;/td>
& lt; td>单价& lt;/td>
& lt; td>小计& lt;/td>
& lt; td>操作& lt;/td>
& lt;/tr>
& lt; tr ng-repeat=商品”“arr比;
& lt; td> {{arr.gname}} & lt;/td>
& lt; td> {{arr.num}} & lt;/td>
& lt; td> {{arr.price |货币:人民币￥“}}& lt;/td>
& lt; td> {{arr.num * arr.price |货币:人民币￥“}}& lt;/td>
& lt; td> & lt;按钮ng-click="删除(美元指数)”在删除& lt;/button> & lt;/td>
& lt;/tr>
& lt; tr>
& lt; td colspan=" 5 "祝辞总金额& lt;跨度ng-bind=癮llSum() |货币:人民币”祝辞& lt;/span> & lt;/td>
& lt;/tr>
& lt;/table>
& lt;/body>
& lt;/html>
之前
更多关于AngularJS相关内容感兴趣的读者可查看本站专题:《AngularJS指令操作技巧总结》,《AngularJS入门与进阶教程》及《AngularJS MVC架构总结》
希望本文所述对大家AngularJS程序设计有所帮助。
