使用Angular.js实现简单的购物车功能
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了使用Angular.js实现简单的购物车功能,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含2913字,纯文字阅读大概需要5分钟。
内容图文
![使用Angular.js实现简单的购物车功能](/upload/InfoBanner/zyjiaocheng/305/ad2d333a163d42daa7780a2d42009550.jpg)
<!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实现简单的购物车功能全部内容,希望文章能够帮你解决使用Angular.js实现简单的购物车功能所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。