使用Angular.js实现简单的购物车功能
程序员文章站
2023-11-16 14:39:28
先给大家分享实现代码,在代码下面有效果图展示,大家可以两者结合参考下,废话不多说了,具体代码如下所示:
先给大家分享实现代码,在代码下面有效果图展示,大家可以两者结合参考下,废话不多说了,具体代码如下所示:
<!doctype html> <html> <head> <meta charset="utf-8"> <title></title> <script src="http://code.angularjs.org/1.2.5/angular.min.js"></script> <style type="text/css"> td,th{ width: 150px; text-align: left; } table{ width: 800px; } .num{ width: 70px; text-align: center; } tr td:last-child button { background-color: red; } #foot button{ background-color: red; } </style> </head> <!--ng-bind是从$scope -> view的单向绑定ng-modle是$scope <-> view的双向绑定 {{}} 与 ng-bind 的区别是后者在加载时用户不会看到渲染之前的东西,前者可能会看到,所以首页一般用后者加载数据 --> <body ng-app="myapp"> <div ng-controller="vc1"> <table border="" cellspacing="" cellpadding=""> <tr><th>产品编号</th><th>产品名称</th><th>购买数量</th><th>产品单价</th><th>产品总价</th><th>操作</th></tr> <tr ng-repeat="x in product" > <td>{{x.id}}</td> <td>{{x.name}}</td> <td> <button ng-click="reduce($index)">-</button> <input type="text" class="num" ng-model="x.quantity" ng-change="change($index)" /> <button ng-click="add($index)">+</button> </td> <td >{{x.price}}</td> <td>{{x.price * x.quantity}}</td> <td><button ng-click="remove($index)">移除</button></td></tr> </table> <div id="foot"><span>总价:</span><span ng-bind="totalquantity()"></span><span>购买数量</span> <span >{{numall()}}</span> <button ng-click="removeall()">清空购物车</button> </div> </div> </body> <script type="text/javascript"> var app = angular.module("myapp",[]); app.controller("vc1",function($scope){ $scope.product = [{ id: 1000, name: "iphone8", quantity: 1, price: 8888 }, { id: 1001, name: "iphone9", quantity: 1, price: 9888 }, { id: 1002, name: "iphone 2s", quantity: 1, price: 3888 }, { id: 1003, name: "iphone 7p+", quantity: 1, price: 10088 }]; //减少数量 $scope.reduce = function(index){ if( $scope.product[index].quantity > 1){ $scope.product[index].quantity--; }else{ $scope.remove(index); } } //添加数量函数 $scope.add = function(index){ $scope.product[index].quantity++; } //所有商品总价函数 $scope.totalquantity = function(){ var allprice = 0 for(var i = 0 ; i <$scope.product.length;i++ ){ allprice += $scope.product[i].quantity * $scope.product[i].price; } return allprice; } //购买总数量函数 $scope.numall = function(){ var numalls = 0 for(var i = 0 ; i <$scope.product.length;i++ ){ numalls += $scope.product[i].quantity; } return numalls; } //删除当前商品 $scope.remove = function(index){ if(confirm("确定要清空数据吗")){ $scope.product.splice(index,1) } } //清空购物车 $scope.removeall = function(){ if(confirm("你确定套清空购物车所有商品吗?")){ $scope.product = []; } } //解决输入框输入负数时变为1 $scope.change = function(index){ if ( $scope.product[index].quantity >= 1) { }else{ $scope.product[index].quantity = 1; } } $scope.$watch('product',function(oldvalue,newvalue){ console.log(oldvalue); console.log(newvalue); }) }) </script> </html>
效果图展示如下:
以上所述是小编给大家介绍的使用angular.js实现简单的购物车功能,希望对大家有所帮助
上一篇: 网站更改标题后,有哪些方法助力排名提升?
下一篇: Oracle数据库自带表空间的详细说明