先给大家分享实现代码，在代码下面有效果图展示，大家可以两者结合参考下，废话不多说了，具体代码如下所示：
<!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" 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实现简单的购物车功能，希望对大家有所帮助，如果大家有任何疑问请给我们留言，小编会及时回复大家的。在此也非常感谢大家对查字典教程网的支持！
【使用Angular.js实现简单的购物车功能】相关文章：
★ 繁简字转换功能
★ 探索angularjs+requirejs全面实现按需加载的套路