使用Angular.js实现简单的购物车功能

先给大家分享实现代码，在代码下面有效果图展示，大家可以两者结合参考下，废话不多说了，具体代码如下所示：

！DOCTYPE html html heartheta charset=' UTF-8 ' title/title script src=' http :http://代码。安格拉js。org/12 .5/棱角分明。量滴js '/script style=' text/CSS ' TD，th { width: 150px文本-左对齐：}表格{宽度： 800px}。数量{宽度： 70px文本对齐：中心；} tr td:last最后一个孩子按钮{底色：红色；} #脚踏按钮{背景-颜色：红色；}/风格/头像！ng绑定是从$范围视图的单向绑定ng-modle是$范围视图的双向绑定{{}} 与尼日利亚绑定的区别是后者在加载时用户不会看到渲染之前的东西，前者可能会看到，所以首页一般用后者加载数据-车身ng-app=' Myapp ' div ng-控制器=' VC1 '表格边框='单元格间距='单元格填充=' trth '产品编号/th产品名称/th购买数量/th产品单价/th产品总价/th操作/th/trtr ng-repeat=' x in Product ' TD { { x . id } }/tdtd { { x . name } }/TDT按钮ng-click=' reduce($ index)'-/按钮输入类型=' text ' class=' num ' ng-model=' x . quantity ' ng-change=' change($ index)'/按钮ng-click=' add($ index '/按钮/TDTD { { x . price } }/TDTD { { x . price * x . quantity } }/TDT按钮ng移除/button/TD/tr/tablediv id=' foot ' span总价：/span span ng-bind=' TotalQuantum()'/span span购买数量/span span { { NumMall()} }/span按钮ng-click='removeAll()'清空购物车/button/div/div/body脚本类型=' text/JavaScript ' var app=angular。 模块(' myApp '，[])；app.controller('VC1 '，函数($scope){$scope .产品=[{id: 1000，名称： 'iPhone8 '，数量： 1,价格： 8888}，{id: 1001，名称： 'iPhone9 '，数量： 1,价格： 9888}，{id: 1002，名称： 'iPhone 2s '，数量： 1,价格3://减少数量$scope.reduce=函数（索引){if($scope).产品[索引]。数量1){$scope .产品[索引]。数量-;}else{$scope.remove(索引);}}//添加数量函数$scope.add=函数（索引){$scope .产品[索引]。数量；}//所有商品总价函数$ scope。总量=函数(){ var all price=0 for(var I=0；一美元范围。产品。长度；i ){allprice=$scope .产品[i].数量* $范围。产品[i].价格；}返回allprice}//购买总数量函数$ scope。nummall=function(){ var nummall=0 for(var I=0；一美元范围。产品。长度；i ){numAlls=$scope .产品[i].数量；}返回nummalls }//删除当前商品$ scope。remove=function(index){ if(confirm(')确定要清空数据吗)){$scope .Product.splice(index，1)}}//清空购物车$ scope。removeall=function(){ if(confirm(')你确定套清空购物车所有商品吗？)){$scope .产品=[];}}//解决输入框输入负数时变为1美元范围。change=function(index){ if($ scope).产品[索引]。数量=1) {}else{$scope .产品[索引]。数量=1;}}$scope .$watch('Product '，function(oldvalue，new value){ console。日志(旧值)；控制台。日志(新值)；})})/脚本/html效果图展示如下：

以上所述是小编给大家介绍的使用Angular.js实现简单的购物车功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！